我们在设置边框阴影时,必不可少的一个属性是box-shadow,box-shadow可以向框添加一个或多个阴影。下面我们来看一下具体的例子。
<!DOCTYPE html><html><head><style> body{margin:30px;background-color:#E9E9E9;}div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green;/* 设置阴影效果 */box-shadow:5px 5px 6px #090;}div.rotate_left{float:left;-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari and Chrome */-o-transform:rotate(7deg); /* Opera */transform:rotate(7deg);}}</style></head><body><div class="polaroid rotate_left"><img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" /><p class="caption">鲜花郁金香,花名:Ballade Dream。</p></div></body></html>
效果如下:
给框添加了阴影效果后,是不是更加具有立体感,更加的美观了(颜色可能不太好看,但你可以选择更好看的搭配……^@^)
说明:我们看到上述代码中,box-shadow后面有四个属性值,他们分别代表什么意思呢?
下面就来看看box-shadow属性值的含义。(推荐:CSS边框属性实例)
box-shadow向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 | 含义 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
在看了各个属性值的含义后,我们可以知道上述例子中设置的阴影效果,box-shadow属性后面的四个属性值分别为:h-shadow、v-shadow、blur、color。
css中有很多的好看的效果都可以实现,想要了解更多关于css阴影效果的内容可以去参考小兔网的CSS3最新版参考手册
CSS3 最新版参考手册
相关推荐:
CSS3 输入框阴影效果及其他阴影效果_html/css_WEB-ITnose
css 需要阴影的效果_html/css_WEB-ITnose
以上就是css阴影效果:css边框阴影如何设置?的知识。速戳>>知识兔学习精品课!