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揭秘》

围观一堆坑货。人家说的是CSS实现。

CSS3以下的是几乎无法实现的(可以利用.HTC这种古董东西)

实现代码(简化过了,只包含关键代码,不可直接使用):

<!DOCTYPE html>

<!-- 上面的DocType是HTML5声明防止某些浏览器不识别,旧版本IE(低于或者等于IE8)无效 -->

<div class="outer">

<div class="inner">

</div></div> .outer {

background:pink

width:100%height:100%

position:relative

}

/* 为了实现透明效果我们要有个背景 */

.inner {

background:black

width:300pxheight:300px

position:absolute

border-radius:100%

behavior:url(yourbehavior.htc)

}

/* 用CSS3新特性圆角来做出圆形效果,border-radius设定为100%为完全圆角(把整个元素变成椭圆形,如果是像素则会制作出一个绝对正圆的圆角,类似圆角长方形或者香肠形)。

宽高必须相等才是正圆。

位置相对定位来保证圆的位置,本例随便做的位置。

behavior是IE低版本的一个绘图功能组件,现在网上有许多可以现成使用的behavior,例如PIE.htc,挑选一个能实现圆角效果并且最适合你的插件来安装使用 */

当然,PNG实现是最简单的,也是最不负责的