CSS魔法之边框

背景知识:box-shadow

box-shadow

在我们实际应用中,应该有很多场景会用到 box-shadow, 它能够帮助我们生成投影,不太为大多数人所知的是,它接受第4个参数,称作是:扩张半径,通过指定正值或者负值,让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的投影将呈现为实线边框。在这里,要注意 不同于border属性的是,box-shadow支持逗号分隔语法,我们可以创建任意数量的投影。

box-shadow: 0 0 0 10px #000, 0 0 0 20px pink;

渲染结果:这个时候要注意,box-shadow是层层叠加的,第一层位于最内层,以此类推。

outline

了解了box-shadow的作用之外,我记得还有一个outline,在某些情况下,你可能需要两层边框,并且你可能需要非实线边框,这个时候box-shadow就没辙了,这时候我们可以用outline描边,另外还可以通过outline-offset属性来控制它和元素之间的间距,这个属性接受负值,这个我个人觉得非常好用。除IE系之外 其它主流浏览器都支持。

应用:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更...
    FlyingWWS阅读 7,038评论 2 5
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,893评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,859评论 0 11
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 6,736评论 0 1
  • 所有图都在body背景设置为green下的截图,请不要把最外层的绿色当成边框 半透明边框 如果我们想给一个容器设置...
    hcxowe阅读 9,515评论 0 6

友情链接更多精彩内容