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 clip-path 用法介绍详解)
- css3独有属性(CSS3 calc会计算属性详解)
- css3渐变动画(CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- css3特效旋转菜单(CSS3实现的水平标题菜单)
- css3语法结构(CSS3中的注音对齐属性ruby-align用法指南)
- CSS3弹性布局
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- css3做出效果(深入解读CSS3中transform变换模型的渲染)
- css flex布局教程(详解CSS3伸缩布局盒模型Flex布局)
- css3 media媒体查询
- css3表单怎么设置大小(CSS3美化表单控件全集)
- css3 box-shadow
- css3动画实现loading(CSS3实现粒子旋转伸缩加载动画)
- css3浮动教程(CSS3使用多列制作瀑布流)
- css3无缝滚动效果(CSS3 制作的图片滚动效果)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
- 《乡村爱情13》开播,新版刘能以假乱真,编剧思维进入瓶颈(新版刘能以假乱真)
- 当年的 白洋淀战神 练肌肉 嘎子哥也成为行走的荷尔蒙(当年的白洋淀战神)
热门推荐
- js实现页面自动跳转
- webpack配置项流程先后顺序(Webpack中publicPath使用详解)
- iis建立ftp站点
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- phpstudy创建网站教程交流(phpStudy V8中创建与管理站点图文教程)
- ocr公式识别python(初探利用Python进行图文识别OCR)
- phpstudy如何部署在linux上(phpstudy linux面板CC防护功能使用教程)
- sqlserver2012卸载工具(Windows下SQL Serever 2012彻底卸载删除教程)
- python机器人开发(python程序控制NAO机器人行走)
- sqlserver数据库同步复制(SqlServer将数据库中的表复制到另一个数据库)