CSS3 box-shadow 内外阴影效果
2017-12-14 16:04
671 查看
说明
box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影,使用逗号分隔。语法
box-shadow: none | [inset? && [<offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ] ]
解释
none:默认值为none,表示没有阴影
inset:可选。将边框外阴影改为边框内阴影(即使是透明边框),背景之上内容之下。如果不写,默认为边框外阴影。inset只可写在最前或者最后。
offset-x:必需。阴影水平方向的偏移量。 0,表示阴影在元素后面;正值,表示阴影在元素右边👉;负值,表示阴影在元素左边👈
offset-y:必需。阴影垂直方向的偏移量。 0,表示阴影在元素后面;正值,表示阴影在元素下边☟;负值,表示阴影在元素上边☝
blur-radius:可选。阴影的模糊距离。不允许为负值。如果值为0,则阴影的边缘清晰,否则,值越大,阴影的边缘越模糊。
spread-radius:可选。默认为0,此时阴影与元素同样大;正直,阴影向各个方向延伸扩大;负值,阴影沿相反方向缩小。
color:可选。如果没有指定,使用浏览器默认颜色--通常是
color属性的值。
举个例子
注意:以下例子不是截图正常情况
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue'>css阴影</p>
css阴影 box-shadow:15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px blue'>css阴影</p>
css阴影 box-shadow:15px 5px 10px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px 5px blue'>css阴影</p>
css阴影 box-shadow:15px 5px 10px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px 5px blue'>css阴影</p>
css阴影 box-shadow:15px 5px 0px 5px blue
负值 (blur-radius不允许为负值,其他三个可以)
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px -5px blue'>css阴影</p>
css阴影 box-shadow:15px -5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px blue'>css阴影</p>
css阴影 box-shadow:-15px -5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px 5px blue'>css阴影</p>
css阴影 box-shadow:-15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px -5px blue'>css阴影</p>
css阴影 box-shadow:15px 5px 10px -5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px -5px blue'>css阴影</p>
css阴影 box-shadow:15px 5px 0px -5px blue
inset 内阴影
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px blue'>css阴影</p>
css阴影 box-shadow:inset 15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px blue'>css阴影</p>
css阴影 box-shadow:inset 15px 5px 10px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px 5px blue'>css阴影</p>
css阴影 box-shadow:inset 15px 5px 10px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 0px 5px blue'>css阴影</p>
css阴影 box-shadow:inset 15px 5px 0px 5px blue
多个阴影
多个阴影,写在前面的权重大,阴影重合部分权重大的值在上面。<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue, -15px -5px red'>css阴影</p>
css阴影 box-shadow:15px 5px blue, -15px -5px red
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green '>css阴影</p>
css阴影 box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px red inset,inset 15px 5px blue'>css阴影</p>
css阴影 box-shadow:-15px -5px red inset,inset 15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset '>css阴影</p>
css阴影 box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset
在线生成阴影值
1:F122: Box Shadow CSS Generator
总结
以上,基本用法已经会了。更复杂的情景,理解了应该很好写出来。在翻阅资料的时候,还看到了另一个属性filter:drop-shadow,也表示阴影,但是有区别。
CSS3 filter:drop-shadow滤镜与box-shadow区别应用
相关文章推荐
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- 为图片添加阴影效果---css3(box-shadow)
- CSS3之------box-shadow属性使用方法(1),即单边阴影效果设置
- IE下模拟css3中的box-shadow(阴影)效果代码
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
- 用CSS3的 box-shadow 来轻松实现图层阴影效果
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- 转: IE下模拟css3中的box-shadow(阴影)效果代码
- css3基础 box-shadow 盒子的内外阴影
- css3的box-shadow图层阴影效果
- 使用CSS3属性box-shadow设置div四周边框都有阴影
- css3 box-shadow阴影(外阴影与外发光)讲解
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3 box-shadow(阴影使用)
- css3 box-shadow阴影(外阴影与外发光)讲解
- CSS3阴影 box-shadow的使用和技巧总结
- css3 box-shadow 盒子效果
- CSS3阴影 box-shadow的使用和技巧总结
- box-shadow的内外阴影
- box-shadow 同时有内阴影和外发光效果