日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
奇技淫巧！不規(guī)則邊框的生成方案

本文將介紹一種配合 SVG 濾鏡實(shí)現(xiàn)各種不規(guī)則圖形添加邊框的小技巧。

目前成都創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、黃山區(qū)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

本文完整的 DEMO，你可以戳這里：transparent 配合 SVG feMorphology 濾鏡生成不規(guī)則邊框 [1]

需求背景，給不規(guī)則圖形添加邊框

在我們?nèi)粘ｉ_發(fā)中，時(shí)常會(huì)遇到一些非矩形、非圓形的圖案。類似下面這些：

不規(guī)則圖形示例

使用純 CSS，搭配一些技巧，是可以制作出上面的圖形的，當(dāng)然這只是需求的第一步。

緊接著，可能會(huì)有要給上述圖形添加邊框的訴求，這個(gè)時(shí)候，CSS 就很難辦到了。

嘗試使用 drop-shadow 添加邊框

第一種方法，我們可以嘗試使用 drop-shadow，給不規(guī)則的圖形，添加一個(gè)外陰影。

我們以一個(gè)箭頭圖形為例使用 CSS 簡單實(shí)現(xiàn)它的其中一種方式如下：
 

 

 
 
 
 
    
  
  
  
  
  1. .arrow-button { 
    2. 
  
  
  
  
  2.     position: relative; 
    3. 
  
  
  
  
  3.     width: 180px; 
    4. 
  
  
  
  
  4.     height: 64px; 
    5. 
  
  
  
  
  5.     background: #f49714; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.     &::after { 
    8. 
  
  
  
  
  8.         content: ""; 
    9. 
  
  
  
  
  9.         position: absolute; 
    10. 
  
  
  
  
  10.         width: 32px; 
    11. 
  
  
  
  
  11.         height: 64px; 
    12. 
  
  
  
  
  12.         top: 0; 
    13. 
  
  
  
  
  13.         right: -32px; 
    14. 
  
  
  
  
  14.         background:  
    15. 
  
  
  
  
  15.             linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%), 
    16. 
  
  
  
  
  16.             linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%); 
    17. 
  
  
  
  
  17.         background-size: 32px 32px; 
    18. 
  
  
  
  
  18.         background-repeat: no-repeat; 
    19. 
  
  
  
  
  19.         background-position: 0 bottom, 0 top; 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. } 
    22.

  

不帶邊框的不規(guī)則圖形

我們通過給 .arrow-button 添加一個(gè) drop-shadow，可以實(shí)現(xiàn)給不規(guī)則圖形添加一個(gè)陰影，效果如下：

 
 
 
 
    
  
  
  
  
  1. .arrow-button { 
    2. 
  
  
  
  
  2.     ... 
    3. 
  
  
  
  
  3.     filter: drop-shadow(0px 0px 2px #000); 
    4. 
  
  
  
  
  4.     ... 
    5. 
  
  
  
  
  5. } 
    6.

 

drop-shadow 實(shí)現(xiàn)的帶陰影邊框的不規(guī)則圖形

drop-shadow 方案的局限性

使用 drop-shadow 方案的局限性在于，drop-shadow 只能對不規(guī)則圖形生成陰影，無法生成不帶模糊的邊框效果。

上述圖形添加 drop-shadow 的效果如下，與我們想要的實(shí)體不帶模糊的邊框還是差了一點(diǎn)：

drop-shadow 實(shí)現(xiàn)的帶陰影邊框的不規(guī)則圖形

使用 SVG feMorphology 濾鏡添加邊框

我們還可以換個(gè)思路，復(fù)制一個(gè)原圖形，再將其稍微放大一點(diǎn)點(diǎn)改變?yōu)檫吙虻念伾缓髢蓚€(gè)圖形疊加在一起，就能夠生成一個(gè)帶邊框的不規(guī)則圖形了。

CSS 中也有能夠放大元素的能力 transform: scale()，但是本身實(shí)現(xiàn)一個(gè)原圖形的代碼可能已經(jīng)非常復(fù)雜了，再疊加一個(gè)可能會(huì)顯得不太優(yōu)雅，我們得另辟蹊徑，尋找其他類似的實(shí)現(xiàn)方案。

這里，我們嘗試使用 SVG的 feMorphology 濾鏡來實(shí)現(xiàn)給不規(guī)則圖形添加邊框。

  • 如果你對 SVG 濾鏡還不算太了解，可以簡單看看我的這篇文章入門：有意思!強(qiáng)大的 SVG 濾鏡[2]

簡單介紹下 feMorphology 濾鏡

feMorphology 濾鏡

feMorphology 為形態(tài)濾鏡，它的輸入源通常是圖形的 alpha 通道，用來它的兩個(gè)操作可以使源圖形腐蝕(變薄)或擴(kuò)張(加粗)。

使用屬性 operator 確定是要腐蝕效果還是擴(kuò)張效果。使用屬性 radius 表示效果的程度，可以理解為筆觸的大小。

  • operator：erode 腐蝕模式，dilate 為擴(kuò)張模式，默認(rèn)為 erode
  • radius：筆觸的大小，接受一個(gè)數(shù)字，表示該模式下的效果程度，默認(rèn)為 0

我們將這個(gè)濾鏡簡單的應(yīng)用到文字上看看效果：

  
 
 
 
    
   
  
  
  
  1.  
    2. 
   
  
  
  
  2.     
    Normal Text
     
    3. 
   
  
  
  
  3.     Normal Text
     
    4. 
   
  
  
  
  4.     Normal Text
     
    5.
 
  •  
  •  
  •      
  •          
  •      
  •      
  •          
  •      
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     font-size: 64px; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .dilate { 
      5. 
  
  
  
  
    5.     filter: url(#dilate); 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .erode { 
      8. 
  
  
  
  
    8.     filter: url(#erode); 
      9. 
  
  
  
  
    9. } 
      10.

     

    效果如下：最左邊的是正常文字，中間的是擴(kuò)張的模式，右邊的是腐蝕模式，看看效果，非常好理解：

    借用 feMorphology 的擴(kuò)張能力給不規(guī)則圖形添加邊框

    利用 feMorphology 的擴(kuò)張能力，我們可以提前準(zhǔn)備好一個(gè) SVG feMorphology 濾鏡，其作用就是上述所說的：

    復(fù)制一個(gè)原圖形，再將其稍微放大一點(diǎn)點(diǎn)改變?yōu)檫吙虻念伾?，然后兩個(gè)圖形疊加在一起，就能夠生成一個(gè)帶邊框的不規(guī)則圖形了。

    并且 SVG 濾鏡可以非常簡單的通過 CSS Filter 的 url 模式引入到各個(gè)不同的圖形當(dāng)中去，復(fù)用性非常的高。

    該濾鏡的簡單代碼如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.          
      5. 
  
  
  
  
    5.              
      6. 
  
  
  
  
    6.              
      7. 
  
  
  
  
    7.          
      8. 
  
  
  
  
    8.      
      9. 
  
  
  
  
    9.  
      10.

    簡單淺析一下這段 SVG 濾鏡代碼：

    1.將原圖的不透明部分作為輸入，采用了 dilate 擴(kuò)張模式且程度為 radius="1"，生成了一個(gè)比原圖大 1px 的黑色圖塊

    2.使用 feMerge 將黑色圖塊和原圖疊加在一起

    我們還是給上述的 .arrow-button 添加一個(gè) CSS filter filter: url(#outline)，引入我們創(chuàng)建的 SVG 濾鏡：

     
 
 
 
      
  
  
  
  
    1. .arrow-button { 
      2. 
  
  
  
  
    2.     ... 
      3. 
  
  
  
  
    3.     filter: url(#outline); 
      4. 
  
  
  
  
    4.     ... 
      5. 
  
  
  
  
    5. } 
      6.

    url 是 CSS 濾鏡屬性的關(guān)鍵字之一，url 模式是 CSS 濾鏡提供的能力之一，允許我們引入特定的 SVG 過濾器，這極大的增強(qiáng) CSS 中濾鏡的能力。

    看看效果：

    SVG 濾鏡實(shí)現(xiàn)的帶邊框的不規(guī)則圖形

    Wow，這下成功了，通過 feMorphology 濾鏡，我們成功的實(shí)現(xiàn)了給不規(guī)則的圖形添加了邊框效果，我能可以通過控制濾鏡中的 radius="1" 來控制邊框的大小。

    再將上述濾鏡運(yùn)用在各種不規(guī)則圖形下看看效果：

    SVG 濾鏡實(shí)現(xiàn)的帶邊框的不規(guī)則圖形

    效果還算可以，就是顏色是黑色的。如果我們希望邊框的顏色是其他顏色，有沒有辦法呢?

    輔以 feFlood 和 feComposite 改變邊框顏色

    通過 feFlood 和 feComposite 兩個(gè) SVG 濾鏡，可以給生成的圖塊上不同的顏色，代碼如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.          
      6. 
  
  
  
  
    6.          
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.          
      9. 
  
  
  
  
    9.              
      10. 
  
  
  
  
    10.              
      11. 
  
  
  
  
    11.          
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.  
      14.

    通過 feFlood 中的 flood-color="green"，即可控制生成的邊框(圖塊)的顏色，這里設(shè)置為了綠色。應(yīng)用到各個(gè)圖形上的效果如下：

    SVG 濾鏡實(shí)現(xiàn)的能改變顏色的帶邊框的不規(guī)則圖形

    至此，我們實(shí)現(xiàn)了通過 SVG 濾鏡實(shí)現(xiàn)對不規(guī)則圖形添加不同顏色的邊框。

    完整的 DEMO，你可以戳這里：transparent 配合 SVG feMorphology 濾鏡生成不規(guī)則邊框 [3]

    總結(jié)一下

    簡單的總結(jié)一下：

    • 使用 drop-shadow 可以實(shí)現(xiàn)給不規(guī)則圖形添加陰影，但是無法實(shí)現(xiàn)給不規(guī)則圖形添加實(shí)體不帶模糊的邊框
    • 使用 feMorphology SVG 濾鏡可以實(shí)現(xiàn)給給不規(guī)則圖形添加邊框效果，通過控制 radius="1" 可以調(diào)節(jié)邊框的大小
    • 使用 feMorphology 輔以 feFlood 和 feComposite 濾鏡改變邊框顏色
    • 通過 CSS Filter 的 url 模式，可以快速的將 SVG 濾鏡引入 HTML 元素，例如 filter: url(#outline)

    值得注意的是，由于圖形高寬不是 1:1 的，并且 feMorphology 的 dilate 模式也不會(huì)根據(jù)元素的高寬等比例的擴(kuò)張，所以生成的邊框是不一定在各處的均勻相等的，而 feMorphology 的 radius 屬性可以傳入兩個(gè)值，使用空格分離，分別表示橫向與縱向的擴(kuò)張大小，實(shí)際使用的時(shí)候可以微調(diào)一下。

    最后

    本文更多的是提供一種不規(guī)則邊框的生成方案思路，當(dāng)然，具體遇到這種情況大部分還是會(huì)以切圖為主，不過多了解掌握一種可行方法也不是壞事。

    好了，本文到此結(jié)束，一個(gè)簡單的小技巧，希望對你有幫助 ????

    如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

    參考資料

    [1]transparent 配合 SVG feMorphology 濾鏡生成不規(guī)則邊框 : https://codepen.io/Chokcoco/pen/ExZPpQq

    [2]有意思!強(qiáng)大的 SVG 濾鏡: https://github.com/chokcoco/cnblogsArticle/issues/27

    [3]transparent 配合 SVG feMorphology 濾鏡生成不規(guī)則邊框 : https://codepen.io/Chokcoco/pen/ExZPpQq


    當(dāng)前標(biāo)題：奇技淫巧！不規(guī)則邊框的生成方案
    文章網(wǎng)址：http://www.5511xx.com/article/cojjdjg.html