多边框 同心圆

在平时的工作中,常常需要制作多个边框,之前我都是用多个DIV来实现,某天突然发现另外的两种方式:

一,box-shadow解决方案

大多数的时候都用box-shadow来创建阴影。不过,很少有人知道它还接受第四个参数(spread),该参数可以缩放阴影的范围。比如下面的示例,我们创建了一个水平和垂直偏移量为0 的阴影,模糊大小也为0,它就使用了上述所说的第四个参数:

background: #c8c7cc; 
border: 10px solid #f00; 
box-shadow:0 0 0  15px #000;

效果如下图所示:

QQ图片20151124093612.png

这还不够令人惊讶,因为它和我们使用 border 创建的边框差不多。不过,强大的是我们可以使用逗号来创建任意数量的阴影。所以,只需要继续添加阴影就可以实现多重阴影了,比如,添加一个颜色为 深粉色 的边框:

background: #c8c7cc; 
border: 10px solid #f00; 
box-shadow:0 0 0  15px #000 , 0 0 0 20px #ff1493;

唯一需要牢记的事情就是,box-shadow 属性是叠在一起的,第一个阴影总是位于最顶层,所以你需要调整阴影的大小。比如,在上一段代码中,我们希望最外层的边框为 15px,那么我们就可以设置一个 20px(15px + 5px) 的阴影。如果你需要,那么就可以为指定任意层次的阴影:

background: #c8c7cc; 
border: 10px solid #f00; 
box-shadow:0 0 0  15px #000 , 0 0 0 20px #ff1493 , 0 0 0 25px #0f0adf;


除了下述的少数情况外,使用 box-shadow 的解决方案都很好用:

阴影并不是边框,它们并不占有实际的空间,也不能归属于 box-sizing 的范围。不过,你可以通过使用内边距或外边距(取决于阴影是内部的还是外部的)占据额外的空间来模拟。

上述示例模拟的边框是位于元素外部的。它不能捕获类似悬停和点击的鼠标事件。如果事件很重要,那么可以通过添加 inset 关键字让阴影出现在元素的内部。注意,你可能需要添加额外的内边距来扩充空间。

QQ图片20151124100602.png

二,outline的解决方案

在某些情况下,如果我们只需要两层边框,那么我们只需要一层常规的边框和一层outline 就可以实现。这也让我们的边框在样式上保持了足够的灵活性(比如我们想要一个虚线边框),但是使用 box-shadow 的话,我们只能模拟出实线边框。如下图所示:

a1.png

background:#a4c338;
border: 10px solid #655;
outline: 15px solid #ff1493;

使用 outline 的另一个好处就是,我们可以通过 outline-offset 控制 outline 到元素边框的距离,该属性甚至可以接受负值。这对很多效果都非常有用

background:#a4c338;
border: 1px dashed #fff;
outline: 10px solid #a4c338;

如下图所示:

a2.png


*注:对于虚线样式的轮廓线,通过给 outline-offset 设置负值,创建了一个基础的缝纫效果 *

不过,这种方法也有一些限制:

就像起初说的那样,这种方法只能模拟两层边框,因为每个元素只能创建一个 outline。如果需要创建多重边框,那么只能使用 box-shadow 的方法。

border-radius 并不能让 outline 呈现圆角效果,所以,即使你的边框是圆角的,outline 仍然是直角的(如下图所示)。


background:#a4c338;
border: 1px dashed #fff;
outline: 10px solid #a4c338;
border-radius:10px;

a2.png

图注:通过outline创建的轮廓线并没有贴合元素的圆角,这个问题在未来可能会被修正


还有一种 border-colors解决方案 但这个兼容性不太好,到目前为止这仅是Gecko内核浏览器独有的属性,所以我也没去研究过

所以,如果要做两个边框,上面两种方式都不错,但如果是要做多个边框或者要做圆角处理、同心圆还是要用 box-shadow 来解决

background: #c8c7cc; 
border: 10px solid #f00; 
box-shadow:0 0 0  15px #000,0 0 0  30px #ff0;
border-radius:50%;

a1.png

background: #a4c338; 
border: 1px dashed #fff; 
box-shadow:0 0 0  15px #a4c338;
border-radius:5px;

a2.png

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:多边框 同心圆

本文地址:http://www.aweb.cc/article/detail/id/445.html

12 个 CSS 高级技巧汇总 <<上一篇