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实现精美横向滚动菜单按钮)
- css3动画怎么实现的(css3中用animation的steps属性制作帧动画)
- CSS3动画属性animation
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- css3边框和边界图片(css3 box-shadow阴影外阴影与外发光图示讲解)
- css3实现120度的箭头(使用css实现任意大小、任意方向和任意角度的箭头示例)
- css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- css3中一些常用的特效果(CSS3 制作的书本翻页特效)
- css3独有属性(CSS3 calc会计算属性详解)
- css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
- css3loading教程(详解纯CSS3制作的20种loading动效)
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- css3 box-shadow
- css3字体怎么写(css3个性化字体_动力节点Java学院整理)
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
- ()
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
热门推荐
- python自学编程笔记(Python 编程速成推荐)
- mysql用户授权的步骤(mysql创建用户并赋予用户权限详细操作教程)
- kubernetes云(云原生技术kubernetesK8S简介)
- tomcat启动慢什么原因(Tomcat服务器响应过慢解决方案)
- C#栈和堆的区别
- sql server2012自动备份(SQL SERVER 2012数据库自动备份的方法)
- js实现div(javascript拖曳互换div的位置实现示例)
- idea怎么在tomcat部署项目(IDEA 配置Tomcat服务器和发布web项目的图文教程)
- dedecms 产品缩略图(织梦DedeCms v5.6/5.7 新图集页面增加图片下载功能)
- linux如何安装php环境(Linux下安装Memcached服务器和客户端与PHP使用示例)