CSS filter 生成不规则边框

前做过很多特殊的布局，比如在这两篇文章 CSS 实现优惠券的技巧 (juejin.cn)[1]、CSS 实现支持渐变的提示框（tooltips） (juejin.cn)[2]，如下

但是一直有一个痛点就是：无法给这些图形加上边框

今天带来一个小技巧：利用 drop-shadow 一行代码搞定所有不规则边框

一、投影

这里需要利用投影 drop-shadow，不太了解的可以参考这篇文章: 被低估的CSS滤镜：drop-shadow[3]，这里简单介绍一下

语法其实很简单

filter: drop-shadow(offset-x offset-y blur-radius color)

并不是一个单独的属性，而是 filter 滤镜下的一个方法

这里 offset-x、offset-y为偏移量，blur-radius为模糊半径，color为投影颜色。实际作用就是可以模拟真实世界的投影（透明的部分不会投影），区别如下

可惜的是，虽然和 box-shadow 比较类似，但是少了扩展半径。试想一下，如果支持了扩展半径，那不规则边框是不是很容易了（应该不会支持了，因为真实世界的投影也没有扩展半径）？

那么，drop-shadow如何生成边框呢？

二、多重投影

box-shadow 可以很轻易的实现多重阴影

box-shadow: 0 0 3px #333, 1px 1px 5px #666, ...

可以无限叠加下去。

但是，drop-shadow可就不行了，比如

filter: drop-shadow(0 0 3px #333, 1px 1px 5px #666, ...)

可以看到浏览器直接认为非法了

不过可以换一种思路，虽然 drop-shadow不支持，但是filter支持多种滤镜，所以可以这样来实现

filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333)...

这样就可以生效了

是不是有点像边框了？如果只设置 0.5px 的模糊，多叠加几次，模糊的部分会变清晰，这个就有点像一个比较软的笔触，多画几笔就变清晰了，于是可以得到这样的效果

这样就更加接近了，实践下来，可能需要微调，这里给出一个比较完美的方案（重点来了~）

.wrap{
  filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}

这样实现的边框已经足够清晰，基本可以日常使用了

这段代码中颜色比较多，可以优化一下，投影的颜色默认是跟随当前文字颜色的，所以可以简化为

.wrap{
  filter: drop-shadow(0 0 0.5px)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0);
  color: #333;
}

线上示例可访问 coupon-border[4]，还有这个 tooltips-border[5]

三、使用和局限

使用方式简单，在容器的最外层加上这一行 CSS 就行了，比如之前的优惠券例子，得到的边框效果这样的

还有这样的

边框还算不错，几乎看不出投影

不过这里需要注意的是，经过 mask 裁剪的图形需要在外层嵌套一层父级，不然投影会被 mask 直接裁剪掉

<div class="wrap">
  <div class="coupon">
   <!--优惠券--> 
  </div>
</div>

另外，这个方案进适合比较小的边框，如果较大的边框，可能会比较圆滑，而且需要叠加更多的滤镜，效果也不太好，如下

这些就需要自行取舍了（一般情况下不会有太粗的边框）

四、总结和说明

本文介绍了一个实现不规则边框的通用方案，成本非常低，效果也非常不错，这里总结一下：

1.drop-shadow只会对不透明部分生成投影，符合真实物理世界2.drop-shadow不支持多重投影，filter支持多重滤镜，可以间接实现多重投影3.边框的实现原理是投影的多重叠加4.有些通过mask裁剪生成的图形，需要在外包裹一层容器，再生成边框5.适合比较小的边框，过大的边框不太理想6.滤镜其实是一个比较耗费性能的属性，不适合太范围使用

可能大部分同学最后可能还是会选择 “切图.png”，不过这也算是一个解决方案，多一种方案总是没错的。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发???

References

[1] CSS 实现优惠券的技巧 (juejin.cn): https://juejin.cn/post/6945023989555134494
[2] CSS 实现支持渐变的提示框（tooltips） (juejin.cn): https://juejin.cn/post/6971261516284690468
[3] 这篇文章: 被低估的CSS滤镜：drop-shadow: https://zhuanlan.zhihu.com/p/195792157
[4] coupon-border: https://codepen.io/xboxyan/pen/jOmeoPd
[5] tooltips-border: https://codepen.io/xboxyan/pen/wvdQgXK

SS3 的边框属性可以给创建圆角的盒子，也可以给盒子设置阴影，用图片美化盒子。

border-radius 圆角

border-radius可以给元素设置圆角。

如下，一个div元素：

<div class="box">border-radius可以给元素设置圆角。</div>

我们给它加一点样式，并设置它的border-radius为15px:

.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}

浏览器中查看效果：

border-radius也可以给它四个角分别设置角度，四个值依次代表左上，右上，右下，左下：

border-radius: 15px 15px 0px 0px;

box-shadow 边框阴影

box-shadow可以为元素设置边框阴影。box-shadow设置的属性如下：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 水平阴影的位置，可以是负值。

v-shadow 垂直阴影的位置，可以是负值。

blur 模糊距离。

spread 阴影的尺寸。

color 阴影的颜色。

inset 将外部阴影 (outset) 改为内部阴影。

以上 h-shadow ，v-shadow是必须要设置的，其他的可以根据需要去设置。

我们给上面的div元素添加阴影：

<div class="box"></div>

css样式：

.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}

浏览器中查看效果：

border-image 图片

border-image 使用图片设置边框。

如下：

<div class="box"></div>

我们先给div元素的边框颜色设置为透明（transparent），然后在使用图片设置边框：

.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}

看一下效果：

童靴们可能不懂为啥属性的前边会有-webkit-、-o-这样的前缀呢？这是因为好多浏览器都不支持CSS的新特性，所以写这些专属的前缀是为了兼容各浏览器。

上一篇CSS3文章最后也讲过各浏览器的前缀，童靴们自己去看一下。

css3 入门简介 ——css3开课啦！

当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。

关注小白前端，持续收到文章推送！

人在校生一枚，希望可以找到志同道合的小伙伴一起进步，不定期的更新自己的收获，如果有大神的话可以指出我的不足，我用的是VS code软件来写代码的

什么是 HTML

HTML 是个缩写，全称Hyper Text Markup Language，译为超文本标记语言。它是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML的结构

html的后缀名有两种一种是.html，另一种是.htm （两种并无区别）
快捷创建基本结构的方法：方法一：可以在开头打一个“!”号，方法二：打一个html，智能提示会出现html:5 选中即可。

HTML的头部

在<hard>头部标签中你可以插入脚本（scripts）,样式文件（CSS），以及各种meta信息。可以添加在头部区域的元素有：<title>，<style>，<meta>，<link>等等

? <title>定义网页标题</title>
<meta>元素：描述了一些基本的元数据，元数据不显示在页面上，但会被浏览器解析，<meta>通常用于指定网页的描述，关键词，作者。

注释快捷键：CTRL+? （注释是不被运行的，作用就是帮助程序员记东西）

 <!--这是一个注释-->

HTML属性

通用属性：几乎所有元素都可以使用的属性，例如 id、name、style等
私有属性：某个一个/类元素所具备的属性
事件属性：为某个元素绑定事件（DOM学习）
自定义属性：开发者为某个元素设置的属性，一般都是在前端框架中使用
参考介绍https://developer.mozilla.org/zh-CN/

HTML完整结构

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
			<!--头部，js和css写在这里面-->
 </head>
 <body>
       <!--内容主体-->
 </body>
 </html>

可能我写的会有些不清楚，到后面有代码的时候就会清楚了

在线咨询

上一篇：爆肝总结2023前端面试，看完学会它，老板追着给你涨
下一篇：安全架构进阶五之数字签名

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商