CSS3 box-shadow 属性

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

163850_DgIr_1582989.png

实例

向 div 元素添加 box-shadow:

div
{
box-shadow: 10px 10px 5px #888888;
}

亲自试一试

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body><div></div></body>
</html>

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

默认值:none
继承性:no
版本:CSS3
JavaScript 语法:object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述测试
h-shadow必需。水平阴影的位置。允许负值。测试
v-shadow必需。垂直阴影的位置。允许负值。测试
blur可选。模糊距离。测试
spread可选。阴影的尺寸。测试
color可选。阴影的颜色。请参阅 CSS 颜色值。测试
inset可选。将外部阴影 (outset) 改为内部阴影。测试

亲自试一试 - 实例

  • 扔到桌子上面的图片

  • 本例演示如何创建“宝丽来”图片,并旋转图片。


转载于:https://my.oschina.net/ajian2014/blog/311771

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序 省市区县三级联动选择器(caseCade)

picker组件 <view class"section"><picker mode"region" bindchange"bindRegionChange" value"{{region}}"><view class"picker">省市区选择: {{region[0]}} {{region[1]}} {{region[2]}}</view>&…

Swagger的坑

swagger.pathPatterns如果是譬如/w/.*&#xff0c;那么如果API中以w开头的描述就会在swagger-ui中显示不出来 转载于:https://www.cnblogs.com/roostinghawk/p/6473864.html

[译]Kinect for Windows SDK开发入门(二):基础知识 上

上篇文章介绍了Kinect开发的环境配置&#xff0c;这篇文章和下一篇文章将介绍Kinect开发的基本知识&#xff0c;为深入研究Kinect for Windows SDK做好基础。 每一个Kinect应用都有一些基本元素。应用程序必须探测和发现链接到设备上的Kinect传感器。在使用这些传感器之前&…

window.open

摘要&#xff1a; 当点击某个按钮或者某个事件发生出发浏览器打开一个新的窗口&#xff0c;这种交互在我们开发的时候经常会见到&#xff0c;一般有两种方法&#xff1a; 通过a标签&#xff0c;<a href"">click</a>&#xff0c;当点击click是就会跳转页面…

小程序 开发经验

项目目录理解components自定义组件库config一个公用的数据配置images本地、上传的图片放置pagespages目录存储小程序的每个页面&#xff0c;每个页面包含四个文档.json为配置文件.wxml 为模板文件&#xff0c;相当于HTML模板.wxss 为样式文件&#xff0c;相当于HTML的CSS样式表…

设置透明色

_currenTable.backgroundColor [[UIColor blackColor] colorWithAlphaComponent:0.55]; 防止字体透明 //中文的地址处理 NSString *URLString [NSURL URLWithString:ktdemodel.img] ? ktdemodel.img : [self strUTF8Encoding:ktdemodel.img]; -(NSString *)strUTF8Encoding:…

EasyUI,二级页面内容的操作

2019独角兽企业重金招聘Python工程师标准>>> 父页面获取子页面的数据 1.若仅仅是勾选&#xff0c;则将勾选的放到map中(key&#xff0c;value)&#xff0c;key是能验证数据唯一的字段&#xff0c;value就是勾选行的rowData&#xff1b; 再将map转换成json格式的字…

动画 自制弹框上滑+渐显效果

<view class"mask {{showShare ? slidefadeUp : slidefadeDown}}" wx:if"{{showShare}}" catchtouchmove"false"> </view> /* 上滑渐显效果 */ .slidefadeUp {animation: slidefadeUp 0.5s 1 ease forwards;-webkit-animation: sli…

使用LinearLayout实现ListView,解决ListView和ScrollView滚动冲突

在项目中&#xff0c;我们常常会遇到一个ScrollView里面会嵌套ListView的情况&#xff0c;但往往你会发现&#xff0c;ListView和ScrollView的滚动时间会有冲突问题&#xff0c;造成ListView不能完全显示。虽然网上有给出解决方案&#xff0c;但事实上并不好用&#xff0c;并不…

【整理】fiddler不能监听 localhost和 127.0.0.1的问题

localhost/127.0.0.1的请求不会通过任何代理发送,fiddler也就无法截获。 解决方案 1&#xff0c;用 http://localhost. (locahost紧跟一个点号)2&#xff0c;用 http://127.0.0.1. (127.0.0.1紧跟一个点号)3&#xff0c;用 http://machinename (机器名) 4&#xff0c;将localho…

IRasterStatistics Interface

今天用自己写的程序模块生成只包含一个波段的RasterDataset&#xff0c;用ArcGIS打开正常&#xff0c;用自己的程序打开灰度显示是错误的。比如这个波段的灰度范围本来是0~100&#xff0c;程序的TOCControl里却显示的是0~255。用ArcGIS打开一次以后&#xff0c;再用自己的程序打…

Javascript 对象二(Number、String、Boolean、Array、Date、Math、RegExp)

Javascript 对象二&#xff08;Number、String、Boolean、Array、Date、Math、RegExp&#xff09;Number 数字 对象String 字符串 对象Boolean 布尔 对象Array 数组 对象Date 日期 对象Math 算数 对象RegExp 正则表达式 对象Number 数字 对象 JavaScript中 数字不分为整数类型…

javascript通用验证

//alert(test); //Validator {Require : /./,Email : /^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/,Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,Url : /^http:\/\/[A-Za-z0-…

Android系统--Binder系统具体框架分析(一)补充

Android系统--Binder系统具体框架分析&#xff08;一&#xff09;补充 补充&#xff1a;对Binder驱动分析一的代码补充&#xff0c;添加saygoobye和saygoodbye_to服务 test_server.h #ifndef _TEST_SERVER_H#define _TEST_SERVER_H#define HELLO_SVR_CMD_SAYHELLO 0#define HEL…

GItHub--Makedown语法学习(快速入门)

段落支持两种标题的语法&#xff1a;Setext 和 atx 形式Setext形式&#xff1a;利用 &#xff08;最高阶标题&#xff09;和 - &#xff08;第二阶标题&#xff09; 标题1标题2 ---Atx 形式&#xff1a;在行首插入 # 即可。可以增加一级标题、二级标题、三级标题、四级标题、…

IPHONE 开发 7 -- Object C 02 字符串NSString 与 char* ,字符串的遍历,字符串的比较,截取与大小写改变,搜索字符串与替换字符串...

Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString &#xff0c;这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改&#xff0c;除非重新给这个字符串赋值。而NSMutableString 创建赋值以后可以动态在该字符串上更改内容与长度…

页面滚动到顶部

//滚动到顶部function initScrollToTop(){ $("html,body").animate({scrollTop: 0},1000);}转载于:https://www.cnblogs.com/baixuemin/p/6485269.html

C#定义属性-静态属性

C#静态属性可以是读写属性&#xff0c;只读属性&#xff0c;只写属性中的任意一种。也就是说&#xff0c;静态属性可以同时包含set访问器和get访问器&#xff0c;也可以只包含其中一种。 静态属性定义方式就是在属性前加static关键字&#xff0c;语法如下&#xff1a; <访问…

File文件存储

文件存储的核心是Context提供了一个openFileOutput()与openFileInput()俩个方法 课程demo 1 public class MainActivity extends AppCompatActivity {2 private EditText edit;3 private TextView tx;4 Override5 protected void onCreate(Bundle savedInstanceSta…

转:ASP.NET MVC4细嚼慢咽---(5)js css文件合并

原文&#xff1a;http://blog.csdn.net/zx13525079024/article/details/19161777 MVC4增加了一些新功能&#xff0c;接下来&#xff0c;我们来研究下MVC4中的新增功能&#xff0c;我们在新建一个MVC4项目的时候&#xff0c;会发现在项目下多出了一个App_Start文件夹&#xff0c…