盒子模型——盒子阴影box-shadow
来源:互联网 发布:head first java 烂 编辑:程序博客网 时间:2024/05/29 13:16
盒子模型——盒子阴影 box-shadow
语法:
box-shadow: inset x-offset y-offset blur-radius color;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
x-offset :必需。水平阴影的位置。允许负值。
y-offset :必需。垂直阴影的位置。允许负值。
blur-radius :可选。模糊距离。
color :可选。阴影的颜色。
inset :可选。将外部阴影 (outset) 改为内部阴影。
spread :可选。阴影的尺寸。
虚阴影效果:
img{
height:300px;
-webkit-box-shadow:2px 2px 10px #fff;
box-shadow:2px 2px 10px #fff;
}
渐变阴影效果:
img{
height:300px;
-webkit-box-shadow:0 0 10px #fff;
box-shadow:0 0 10px #fff;
}
带光晕效果
img{
height:300px;
-webkit-box-shadow:0 0 10px 10px #fff;
box-shadow:0 0 10px 10px #fff;
}
内阴影效果
img{
height:300px;
-webkit-box-shadow:inset 5px 5px 10px #fff;
box-shadow:inset 5px 5px 10px #fff;
}
彩色阴影
img{
height:300px;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green:
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
}
- 盒子模型——盒子阴影box-shadow
- 盒子阴影-box-shadow
- CSS3盒子阴影 box-shadow属性
- box-shadow是向盒子添加阴影
- css3盒子阴影box-shadow 设置
- 盒子阴影box-shadow和文本阴影text-shadow
- CSS中怎样制作盒子阴影 box-shadow
- css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)
- css3 box-shadow 盒子效果
- 盒子模型box-sizing
- 盒子模型(Box Model)
- Box Model 盒子模型
- css-box盒子模型
- 盒子模型(一)——block box
- 盒子模型(二)——line box
- HTML5基础加强css样式篇(盒子阴影属性:box-shadow)(三十六)
- CSS—盒子模型
- Html—盒子模型
- jQuery--9.$.ajax(),表单序列化,formdata
- debug心得(一)
- 启发式搜索技术A* (A* Pathfinding for Beginners)
- androidStudio开发过程中minSdk(API 26) > deviceSdk(API 19)解决办法
- 腾讯前端面试题集锦
- 盒子模型——盒子阴影box-shadow
- Git push与pull的默认行为
- android对应的测试工具
- 设计模式对比篇
- HDU
- POJ 2299 Ultra-QuickSort 模板 求逆序对
- poj3414 Pots(bfs)
- struts2.5动态方法调用失败的解决
- Xshell 连接腾讯云、阿里云centos服务器