css3阴影

box-shadow

box-shadow可以为元素添加阴影,支持添加一个或者多个。

1 box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

参数:

注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

阴影模糊半径:

此参数可选,值只能是为正值,如果值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊。

css代码:

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:4px 4px 15px #666;
6 }

效果:

阴影扩展半径:

此参数可选,值可以是正负值,如果值为正数,整个阴影都延展扩大,反之值为负值时,则缩小。

css代码:

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:4px 4px 15px -3px #666;
6 }

效果:

X轴偏移量和Y轴偏移量值可以设置为负数

X轴偏移量为负数:

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:-5px 5px 5px #666;
6 }

效果:

Y轴偏移量为负数:

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:5px -5px 5px #666;
6 }

效果:

外阴影:

1 #box{
2     width:50px;
3     height:50px;
4     background:green;
5     box-shadow:5px 4px 10px #666;
6 }

效果:

内阴影:

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:5px 4px 10px #666 inset;
6 }

效果:

添加多个阴影:

1 #box{
2     width:50px;
3     height:50px;
4     background:#fff;
5     box-shadow:5px 4px 10px #666 inset,
6                3px 3px 5px pink,
7                6px 4px 2px green;
8 }

效果:

时间: 2024-10-27 19:12:24

css3阴影的相关文章

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

【转】CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

【转】 CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

CSS3阴影 box-shadow的使用总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

CSS3 阴影(text-shadow)

在以前,阴影效果一般都是做成图片,现在有了CSS3 可以直接使用text-shadow 属性来实现阴影.这个属性可以有两个作用,产生阴影和模糊主体.这样在不需要图片的情况下就能给文字增加质感. 基本语法: text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color)  x轴

CSS3阴影 box-shadow的使用和技巧总结[转]

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

CSS3 阴影模拟灯照效果

效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="renderer" conten

CSS3之阴影

CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur color; 参数分别表示水平阴影位置,垂直阴影位置,模糊半径,阴影颜色. 一个栗子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</tit

CSS3知识之阴影box-shadow

一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow     必需.水平阴影的位置.允许负值. v-shadow        必需.垂直阴影的位置.允许负值. blur                 可选.模糊距离. spread             可选.阴影的尺寸. color                可选.阴影的颜色. inset