CSS filter 生成不規(guī)則邊框

前做過很多特殊的布局，比如在這兩篇文章 CSS 實(shí)現(xiàn)優(yōu)惠券的技巧 (juejin.cn)[1]、CSS 實(shí)現(xiàn)支持漸變的提示框（tooltips） (juejin.cn)[2]，如下

但是一直有一個(gè)痛點(diǎn)就是：無(wú)法給這些圖形加上邊框

今天帶來(lái)一個(gè)小技巧：利用 drop-shadow 一行代碼搞定所有不規(guī)則邊框

一、投影

這里需要利用投影 drop-shadow，不太了解的可以參考這篇文章: 被低估的CSS濾鏡：drop-shadow[3]，這里簡(jiǎn)單介紹一下

語(yǔ)法其實(shí)很簡(jiǎn)單

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

并不是一個(gè)單獨(dú)的屬性，而是 filter 濾鏡下的一個(gè)方法

這里 offset-x、offset-y為偏移量，blur-radius為模糊半徑，color為投影顏色。實(shí)際作用就是可以模擬真實(shí)世界的投影（透明的部分不會(huì)投影），區(qū)別如下

可惜的是，雖然和 box-shadow 比較類似，但是少了擴(kuò)展半徑。試想一下，如果支持了擴(kuò)展半徑，那不規(guī)則邊框是不是很容易了（應(yīng)該不會(huì)支持了，因?yàn)檎鎸?shí)世界的投影也沒有擴(kuò)展半徑）？

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

二、多重投影

box-shadow 可以很輕易的實(shí)現(xiàn)多重陰影

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

可以無(wú)限疊加下去。

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

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

可以看到瀏覽器直接認(rèn)為非法了

不過可以換一種思路，雖然 drop-shadow不支持，但是filter支持多種濾鏡，所以可以這樣來(lái)實(shí)現(xiàn)

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

這樣就可以生效了

是不是有點(diǎn)像邊框了？如果只設(shè)置 0.5px 的模糊，多疊加幾次，模糊的部分會(huì)變清晰，這個(gè)就有點(diǎn)像一個(gè)比較軟的筆觸，多畫幾筆就變清晰了，于是可以得到這樣的效果

這樣就更加接近了，實(shí)踐下來(lái)，可能需要微調(diào)，這里給出一個(gè)比較完美的方案（重點(diǎn)來(lái)了~）

.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)
}

這樣實(shí)現(xiàn)的邊框已經(jīng)足夠清晰，基本可以日常使用了

這段代碼中顏色比較多，可以優(yōu)化一下，投影的顏色默認(rèn)是跟隨當(dāng)前文字顏色的，所以可以簡(jiǎn)化為

.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]，還有這個(gè) tooltips-border[5]

三、使用和局限

使用方式簡(jiǎn)單，在容器的最外層加上這一行 CSS 就行了，比如之前的優(yōu)惠券例子，得到的邊框效果這樣的

還有這樣的

邊框還算不錯(cuò)，幾乎看不出投影

不過這里需要注意的是，經(jīng)過 mask 裁剪的圖形需要在外層嵌套一層父級(jí)，不然投影會(huì)被 mask 直接裁剪掉

<div class="wrap">
  <div class="coupon">
   <!--優(yōu)惠券--> 
  </div>
</div>

另外，這個(gè)方案進(jìn)適合比較小的邊框，如果較大的邊框，可能會(huì)比較圓滑，而且需要疊加更多的濾鏡，效果也不太好，如下

這些就需要自行取舍了（一般情況下不會(huì)有太粗的邊框）

四、總結(jié)和說(shuō)明

本文介紹了一個(gè)實(shí)現(xiàn)不規(guī)則邊框的通用方案，成本非常低，效果也非常不錯(cuò)，這里總結(jié)一下：

1.drop-shadow只會(huì)對(duì)不透明部分生成投影，符合真實(shí)物理世界2.drop-shadow不支持多重投影，filter支持多重濾鏡，可以間接實(shí)現(xiàn)多重投影3.邊框的實(shí)現(xiàn)原理是投影的多重疊加4.有些通過mask裁剪生成的圖形，需要在外包裹一層容器，再生成邊框5.適合比較小的邊框，過大的邊框不太理想6.濾鏡其實(shí)是一個(gè)比較耗費(fèi)性能的屬性，不適合太范圍使用

可能大部分同學(xué)最后可能還是會(huì)選擇 “切圖.png”，不過這也算是一個(gè)解決方案，多一種方案總是沒錯(cuò)的。最后，如果覺得還不錯(cuò)，對(duì)你有幫助的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???

References

[1] CSS 實(shí)現(xiàn)優(yōu)惠券的技巧 (juejin.cn): https://juejin.cn/post/6945023989555134494
[2] CSS 實(shí)現(xiàn)支持漸變的提示框（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 的邊框?qū)傩钥梢越o創(chuàng)建圓角的盒子，也可以給盒子設(shè)置陰影，用圖片美化盒子。

border-radius 圓角

border-radius可以給元素設(shè)置圓角。

如下，一個(gè)div元素：

<div class="box">border-radius可以給元素設(shè)置圓角。</div>

我們給它加一點(diǎn)樣式，并設(shè)置它的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也可以給它四個(gè)角分別設(shè)置角度，四個(gè)值依次代表左上，右上，右下，左下：

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

box-shadow 邊框陰影

box-shadow可以為元素設(shè)置邊框陰影。box-shadow設(shè)置的屬性如下：

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

h-shadow 水平陰影的位置，可以是負(fù)值。

v-shadow 垂直陰影的位置，可以是負(fù)值。

blur 模糊距離。

spread 陰影的尺寸。

color 陰影的顏色。

inset 將外部陰影 (outset) 改為內(nèi)部陰影。

以上 h-shadow ，v-shadow是必須要設(shè)置的，其他的可以根據(jù)需要去設(shè)置。

我們給上面的div元素添加陰影：

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

css樣式：

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

瀏覽器中查看效果：

border-image 圖片

border-image 使用圖片設(shè)置邊框。

如下：

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

我們先給div元素的邊框顏色設(shè)置為透明（transparent），然后在使用圖片設(shè)置邊框：

.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;
}

看一下效果：

童靴們可能不懂為啥屬性的前邊會(huì)有-webkit-、-o-這樣的前綴呢？這是因?yàn)楹枚酁g覽器都不支持CSS的新特性，所以寫這些專屬的前綴是為了兼容各瀏覽器。

上一篇CSS3文章最后也講過各瀏覽器的前綴，童靴們自己去看一下。

css3 入門簡(jiǎn)介 ——css3開課啦！

當(dāng)你感到悲哀痛苦時(shí)，最好是去學(xué)些什么東西。學(xué)習(xí)會(huì)使你永遠(yuǎn)立于不敗之地。

關(guān)注小白前端，持續(xù)收到文章推送！

人在校生一枚，希望可以找到志同道合的小伙伴一起進(jìn)步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來(lái)寫代碼的

什么是 HTML

HTML 是個(gè)縮寫，全稱Hyper Text Markup Language，譯為超文本標(biāo)記語(yǔ)言。它是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。

HTML的結(jié)構(gòu)

html的后綴名有兩種一種是.html，另一種是.htm （兩種并無(wú)區(qū)別）
快捷創(chuàng)建基本結(jié)構(gòu)的方法：方法一：可以在開頭打一個(gè)“!”號(hào)，方法二：打一個(gè)html，智能提示會(huì)出現(xiàn)html:5 選中即可。

HTML的頭部

在<hard>頭部標(biāo)簽中你可以插入腳本（scripts）,樣式文件（CSS），以及各種meta信息。可以添加在頭部區(qū)域的元素有：<title>，<style>，<meta>，<link>等等

? <title>定義網(wǎng)頁(yè)標(biāo)題</title>
<meta>元素：描述了一些基本的元數(shù)據(jù)，元數(shù)據(jù)不顯示在頁(yè)面上，但會(huì)被瀏覽器解析，<meta>通常用于指定網(wǎng)頁(yè)的描述，關(guān)鍵詞，作者。

注釋快捷鍵：CTRL+? （注釋是不被運(yùn)行的，作用就是幫助程序員記東西）

 <!--這是一個(gè)注釋-->

HTML屬性

通用屬性：幾乎所有元素都可以使用的屬性，例如 id、name、style等
私有屬性：某個(gè)一個(gè)/類元素所具備的屬性
事件屬性：為某個(gè)元素綁定事件（DOM學(xué)習(xí)）
自定義屬性：開發(fā)者為某個(gè)元素設(shè)置的屬性，一般都是在前端框架中使用
參考介紹https://developer.mozilla.org/zh-CN/

HTML完整結(jié)構(gòu)

 <!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>
       <!--內(nèi)容主體-->
 </body>
 </html>

可能我寫的會(huì)有些不清楚，到后面有代碼的時(shí)候就會(huì)清楚了

在線咨詢

上一篇：爆肝總結(jié)2023前端面試，看完學(xué)會(huì)它，老板追著給你漲
下一篇：安全架構(gòu)進(jìn)階五之?dāng)?shù)字簽名

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商