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

边框内圆角效果

box-shadow:给元素块添加周边阴影效果。
语法:box-shadow: h-shadow v-shadow blur spread color inset;


h-shadowv-shadow 是必需的,其余为可选。
inset意思为内阴影,不写的话,默认为外阴影。

*还有另一种情况:box-shadow: 0 2px 2px #FECC84
当我们在色值前只写了三个数值的情况下,则第三个值是blur(模糊距离)。

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

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

*关于为什么会这样:
outline的描边并不会跟着圆角走,因此显示为直角。


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


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,294评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,335评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,803评论 0 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,199评论 0 11
  • 今天去县城参加了雷哥女儿的满月宴。 哈哈,能宝走到哪里都是被夸被喜欢的娃娃。家里亲戚见了都夸他长得好看,说我会带孩...
    林培阅读 267评论 0 4