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

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

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

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

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

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

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

在我們日常開發(fā)中，時常會遇到一些非矩形、非圓形的圖案。類似下面這些：

不規(guī)則圖形示例

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

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

嘗試使用 drop-shadow 添加邊框

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

我們以一個箭頭圖形為例使用 CSS 簡單實現它的其中一種方式如下：
 

 

 
 
 
 
    
  
  
  
  
  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 添加一個 drop-shadow，可以實現給不規(guī)則圖形添加一個陰影，效果如下：

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

 

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

drop-shadow 方案的局限性

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

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

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

使用 SVG feMorphology 濾鏡添加邊框

我們還可以換個思路，復制一個原圖形，再將其稍微放大一點點改變?yōu)檫吙虻念伾?，然后兩個圖形疊加在一起，就能夠生成一個帶邊框的不規(guī)則圖形了。

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

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

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

簡單介紹下 feMorphology 濾鏡

feMorphology 濾鏡

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

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

  • operator：erode 腐蝕模式，dilate 為擴張模式，默認為 erode
  • radius：筆觸的大小，接受一個數字，表示該模式下的效果程度，默認為 0

我們將這個濾鏡簡單的應用到文字上看看效果：

  
 
 
 
    
   
  
  
  
  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.

     

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

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

    利用 feMorphology 的擴張能力，我們可以提前準備好一個 SVG feMorphology 濾鏡，其作用就是上述所說的：

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

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

    該濾鏡的簡單代碼如下：

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

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

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

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

    我們還是給上述的 .arrow-button 添加一個 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 濾鏡屬性的關鍵字之一，url 模式是 CSS 濾鏡提供的能力之一，允許我們引入特定的 SVG 過濾器，這極大的增強 CSS 中濾鏡的能力。

    看看效果：

    SVG 濾鏡實現的帶邊框的不規(guī)則圖形

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

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

    SVG 濾鏡實現的帶邊框的不規(guī)則圖形

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

    輔以 feFlood 和 feComposite 改變邊框顏色

    通過 feFlood 和 feComposite 兩個 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"，即可控制生成的邊框(圖塊)的顏色，這里設置為了綠色。應用到各個圖形上的效果如下：

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

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

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

    總結一下

    簡單的總結一下：

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

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

    最后

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

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

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

    參考資料

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

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

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


    新聞名稱：奇技淫巧！不規(guī)則邊框的生成方案
    當前地址：http://m.5511xx.com/article/cojjdjg.html