2、多重边框

1. box-shadow方案

box-shadow还接受第四个参数,表示扩张半径,可以使用第四个参数来模仿边框。

background: yellowgreen;
box-shadow: 0 0 0 10px #655; // 视觉效果上类似于 border: 10px solid #655;

因为box-shadow可以使用逗号分隔语法生成多个阴影,利用这一特点可以实现多重边框。

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 0 0 20px blue;

使用多个阴影时,阴影之间层层叠加,第一层阴影位于最顶端,依次类推。需要注意的是:因为阴影不会影响布局,所以阴影生成的边框也不会影响布局,并且不会响应元素上的鼠标事件,如果想要阴影响应鼠标事件,可以将阴影改为内部阴影,再加上额外的内边距来保证盒子的大小不发生变化(在没有设置box-sizing属性时,只是视觉效果上的没有变化)。

box-shadow: 0 0 0 5px blue inset,
            0 0 0 10px deeppink inset,
            0 0 0 20px #655 inset;
padding: 20px;
// 由于阴影在盒子内部,加上额外的内边距之后,盒子视觉上总大小不变,但是阴影部分也会相应鼠标事件,注意外边框改内边框时颜色的顺序变化。

box-shadow方案只能生成实现的边框。


2. outline解决方案

当只需要两层边框时,可以使用outline属性。

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

outline方案的优势在于可以生成虚线边框:

background: yellowgreen;
border: 10px solid #655;
outline: 5px dashed deeppink;

outline的另一个好处在于可以使用outline-offset属性来控制描边与边框之间的距离,并且可以为负值,可以利用这一特点来实现内部边框效果。

background: #655;
outline: 1px dashed white;
outline-offset: -10px;

需要注意的是outline目前不会贴合圆角,未来可能会改变这一现象。

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

推荐阅读更多精彩内容

  • 1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更...
    FlyingWWS阅读 7,036评论 2 5
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,890评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,859评论 0 11
  • 所有图都在body背景设置为green下的截图,请不要把最外层的绿色当成边框 半透明边框 如果我们想给一个容器设置...
    hcxowe阅读 9,513评论 0 6
  • 最近在阅读CSS Secrets这本书,发现作者讲解了很多容易被忽略的CSS小技巧,感受到作者在写代码的过程中,不...
    hershin阅读 3,355评论 0 0

友情链接更多精彩内容