CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”

html-css016

CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”,第1张

box-shadow:给元素块添加周边阴影效果。

语法:box-shadow: h-shadow v-shadow blur spread color inset

*还有另一种情况: box-shadow: 0 2px 2px #FECC84

当我们在色值前只写了三个数值的情况下,则第三个值是 blur (模糊距离)。

利用阴影属性,也可以实现外边框的效果:

当我们再为它添加一个 outline (轮廓),就会发现它实现了-边框内圆角:

* 关于为什么会这样:

outline的描边并不会跟着圆角走,因此显示为直角。

所以把这两者叠加到一起,box-shadow 则刚好填补描边与容器圆角之间的空隙。

*值得注意的是,box-shadow 阴影的大小值并不一定等于描边的宽度,它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上,制定一个等于描边宽度的值在某些浏览器中可能会渲染异常,所以,最好是稍小的值。

参考书籍: Lea Verou 《CSS揭秘》

可以用CSS3的阴影属性。 不过要支持IE6的话,加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;第三个值(10px)是设置模糊距离;black就是阴影的颜色啦;最后一个inset是在元素内部创建一个阴影,也就是内阴影了;删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果,在DIV层的区域边框添加阴影效果,看上去非常形象,但是实现起来并不是太难,CSS代码比较简洁,值得我们学习。盒子阴影的CSS实现方法