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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- css3自制像素细线(css3绘制百度的小度熊)
- CSS3中user-select的用法
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- css3粒子特效(利用CSS3实现毛玻璃效果示例源码)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- css3 3d动画效果(CSS3实现任意图片lowpoly动画效果实例)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- css3最新特效(CSS3实现的文字弹出特效)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- css3如何添加图形(CSS3地图动态实例代码圆圈向外扩散)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
- 营养餐是什么(学校营养餐是什么)
热门推荐
- opencv怎么设置图像形态(OpenCV图像颜色反转算法详解)
- dedecms怎么设置下拉菜单(织梦DedeCMS实现 三级栏目_二级栏目_一级栏目_网站名称 的效果代码)
- python中的迭代器详解(Python通过for循环理解迭代器和生成器实例详解)
- mysql 命令与sqlserver的区别大么(MySQL系列之执行SQL 语句时发生了什么?)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- zabbixagent安装教程(zabbix-agent在麒麟V10上的安装过程)
- 修改宝塔nginx端口(解决宝塔面板nginx/apache防火墙后无法启动)
- css3滤镜过渡效果代码(CSS3实现的3D隧道效果)
- mysqlcount使用方法(详解 MySQL中count函数的正确使用方法)
- MySQL批量执行SQL脚本文件
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9