css3 box-shadow
类别:Web前端 浏览量:526
时间:2015-8-9 css3 box-shadow
css3 box-shadowcss3中box-shadow是给元素块添加周边阴影效果。
一、语法
box-shadow:
inset
x-offset y-offset blur-radius spread-radius color
也就是
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
5、阴影扩展半径
此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
6、阴影颜色
此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
备注
为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
.box-shadow-1{
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
.box-shadow-2{
-webkit-box-shadow:0 0 10px #0CC;
-moz-box-shadow:0 0 10px #0CC;
box-shadow:0 0 10px #0CC;
}
效果图
3、
.box-shadow-3{
-webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
-moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
box-shadow:0 0 10px rgba(0, 204, 204, .5);
}
效果图
4、
.box-shadow-4{
-webkit-box-shadow:0 0 10px 15px #0CC;
-moz-box-shadow:0 0 10px 15px #0CC;
box-shadow:0 0 10px 15px #0CC;
}
效果图
5、
.box-shadow-5{
-webkit-box-shadow:inset 0 0 10px #0CC;
-moz-box-shadow:inset 0 0 10px #0CC;
box-shadow:inset 0 0 10px #0CC;
}
效果图
6、
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
}
效果图
7、
.box-shadow-7{
box-shadow:0 0 10px 5px black,
0 0 10px 20px red;
}
效果图
8、
.box-shadow-8{
box-shadow:0 0 10px 20px red,
0 0 10px 5px black;
}
效果图
9、
.box-shadow-9{
box-shadow: 0 0 0 1px red;
}
效果图
标签:css3
您可能感兴趣
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- css3填充式进度条动画(CSS3样式linear-gradient的使用实例)
- css3编程实战(详解CSS3开启硬件加速的使用和坑)
- css3设置动画无限循环(css3 实现文字闪烁效果的三种方式示例代码)
- css3带阴影弹出窗口(CSS3解决移动页面上点击链接触发色块的问题)
- css3中一些常用的特效果(CSS3 制作的书本翻页特效)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- css3样式设计图片(CSS3 制作的彩虹按钮样式)
- css3结合js制作(CSS3截取字符串实例代码推荐)
- css3菜单特效(CSS3实现精美横向滚动菜单按钮)
- css3旋转动画教学(css3动画效果抖动解决方法)
- CSS3动画属性animation
- css3实现凸起效果(CSS3轻松实现圆角效果)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css3动画效果图(css3实现波纹特效、H5实现动态波浪效果)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
- 秦海璐炫耀和王新军热恋蜜事,不料对方吐槽她吃饱后肚子撅老高(秦海璐炫耀和王新军热恋蜜事)
热门推荐
- 阿里云对象存储oss请求次数(阿里云服务器本地上传到OSS对象存储节点)
- mybatis如何插入空格字符串(MyBatis SQL xml处理小于号与大于号正确的格式)
- 简简单单教你用python写个游戏(python3 pygame实现接小球游戏)
- mysql的四种关系运算(详解MySQL拼接函数CONCAT的使用心得)
- mysql怎么看脱机数据(MYSQL电话号码,身份证数据脱敏的实现)
- Request、Request.Form、Request.QueryString的区别
- python time模块记录时间(Python Datetime模块和Calendar模块用法实例分析)
- ASP.NET写文件的方法
- serv-u突然不允许上传(Serv-U 密匙冲突,Serv-U无法启动处于离线状态解决方法)
- dedecms怎么设置下拉菜单(dedecms中关于{dede:channel type='son'}无子栏目时取同级栏目问题是解决方法分)