這篇文章主要介紹“css不規(guī)則邊框的用法”，在日常操作中，相信很多人在css不規(guī)則邊框的用法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css不規(guī)則邊框的用法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷(xiāo)的理念，以專(zhuān)業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，小程序制作，網(wǎng)頁(yè)設(shè)計(jì)制作，手機(jī)網(wǎng)站制作，成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專(zhuān)業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專(zhuān)業(yè)和所長(zhǎng)。

大家可能都習(xí)慣了使用box-shadow來(lái)設(shè)置盒陰影，但顧名思義，盒陰影一般陰影的投影是一個(gè)方形，如果我們遇到其他情況，想要做陰影效果應(yīng)該怎么實(shí)現(xiàn)呢？

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

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

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

一、投影

這里需要利用投影 drop-shadow，這里簡(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 比較類(lèi)似，但是少了擴(kuò)展半徑。試想一下，如果支持了擴(kuò)展半徑，那不規(guī)則邊框是不是很容易了（應(yīng)該不會(huì)支持了，因?yàn)檎鎸?shí)世界的投影也沒(méi)有擴(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)為非法了

不過(guò)可以換一種思路，雖然 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è)比較軟的筆觸，多畫(huà)幾筆就變清晰了，于是可以得到這樣的效果

這樣就更加接近了，實(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;
}

三、使用和局限

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

還有這樣的

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

不過(guò)這里需要注意的是，經(jīng)過(guò) 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é)一下：

• drop-shadow只會(huì)對(duì)不透明部分生成投影，符合真實(shí)物理世界

• drop-shadow不支持多重投影，filter支持多重濾鏡，可以間接實(shí)現(xiàn)多重投影

• 邊框的實(shí)現(xiàn)原理是投影的多重疊加

• 有些通過(guò)mask裁剪生成的圖形，需要在外包裹一層容器，再生成邊框

• 適合比較小的邊框，過(guò)大的邊框不太理想

• 濾鏡其實(shí)是一個(gè)比較耗費(fèi)性能的屬性，不適合太范圍使用

可能大部分同學(xué)最后可能還是會(huì)選擇 “切圖.png”，不過(guò)這也算是一個(gè)解決方案 ，多一種方案總是沒(méi)錯(cuò)的。

到此，關(guān)于“css不規(guī)則邊框的用法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

新聞名稱(chēng)：css不規(guī)則邊框的用法
標(biāo)題鏈接：http://chinadenli.net/article22/gdodcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、Google、域名注冊(cè)、、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)