box-shadow阴影
来源:互联网 发布:如何看网络棋牌频道 编辑:程序博客网 时间:2024/05/29 10:28
使用box-shadow为盒子添加阴影。
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
投影方式有两种:inset
内部投影,outset
外部投影,默认值。
box-shadow: 0px 0px 0px 10px red;
box-shadow: 0px 0px 10px 0px red;
box-shadow: 0px 0px 10px 10px red;
box-shadow: 10px 10px 10px 10px red;
box-shadow: 10px 10px 10px 10px red inset;
阴影只是表现,而不会占据实际的位置。
可以同时添加多个阴影效果,只需要用逗号隔开
box-shadow: 0px -10px 10px 2px red, -10px 0px 10px 2px blue, 10px 0px 10px 2px orange, 0px 10px 10px 2px green;![这里写图片描述](http://img.blog.csdn.net/20170525215350499?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXBkZW1w/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)上图中的分方向的阴影是通过h-shadow,v-shadow来实现的
兼容性
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);//使用滤镜,但是滤镜必须要设置background-color;background-color: #CCC;-moz-box-shadow: 0px 10px 10px 2px green;-webkit-box-shadow: 0px 10px 10px 2px green;box-shadow: 0px 10px 10px 2px green;
阅读全文
0 0
- box-shadow阴影
- 【CSS3】---阴影 box-shadow
- 阴影box-shadow
- css3阴影box-shadow
- 边框阴影box-shadow
- box-shadow阴影效果
- 盒子阴影-box-shadow
- 阴影box-shadow
- css3阴影box-shadow
- box-shadow 投射阴影
- 阴影box-shadow详解
- css3阴影属性box-shadow
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3盒阴影box-shadow
- box-shadow的内外阴影
- css3 边框阴影 box-shadow
- 北邮人论坛面经转载(2)感谢学长学姐们
- sh-简单学习写脚本
- 积分图
- mac xcode最新版本 迅雷下载 官网下载 离线下载 非app store
- scoket通讯过程中的封包,解包与异或加密等
- box-shadow阴影
- web兼容---ie8、9、10、11hack、注释ie版本css样式hack
- JNI所需的C语言知识小结
- Kotlin笔记(二)环境配置及HelloWord
- ubuntu14.04+cuda8.0(GTX1080)+caffe安装
- C# 类的属性、对象
- WPF 模板选择器
- public staticvoid main(String[]args)函数解析
- redis 学习笔记