重學 -- 透明邊框background-clip · 前端知識 -- 學習整理

[TOC] >[success] # 重學 -- 透明邊框 ![](https://box.kancloud.cn/e31da037b20b756059fa8f50bc164695_556x180.png) ~~~ 1.想做到圖片這種效果透明邊框需要使用css的'background-clip' 屬性 ~~~ >[info] ## background-clip 介紹 ~~~ 1.'background-clip：border-box | padding-box | content-box | text' 2.'border-box'：從border區域（含border）開始向外裁剪背景。 3.'padding-box'：從padding區域（含padding）開始向外裁剪背景。 4.'content-box'：從content區域開始向外裁剪背景。 5.'text'：從前景內容的形狀（比如文字）作為裁剪區域向外裁剪，如此即可實現使用背景作為填充色之類的遮罩效果。遮罩效果 ~~~ >[danger] ##### border-box -- 默認值 * 代碼展示效果: ![](https://box.kancloud.cn/fdef704dc960e481c6f1fc3eae13145a_249x197.png) * 放大效果： ![](https://box.kancloud.cn/73d80400c441e86d5abc7cf180bbaf78_236x171.png) ~~~ 1.下面代碼使用了'border-box' 也就是默認效果，將這個效果放大后可以發現默認狀態下背景延伸在'border' 邊框下 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height: 100px; background-color: beige; background-clip:border-box; border: 2px dotted red; margin: 50% auto; } </style> </head> <body> <div> </div> </body> </html> ~~~ >[danger] ##### padding-box -- 從邊框內側開始 * 放大圖片 ![](https://box.kancloud.cn/c36616f7eabe99842cbdf12f6863e9f1_251x162.png) ~~~ 1.當使用'padding-box ' 屬性通過放大圖可以看出來，整個背景顯示區域緊貼著整個邊框最內部 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height: 100px; background-color: beige; background-clip:padding-box; border: 2px dotted red; margin: 50% auto; } </style> </head> <body> <div> </div> </body> </html> ~~~ >[danger] ##### content-box -- 從內容開始 * 正常效果 ![](https://box.kancloud.cn/6d785e95153174121ade193cd77b68da_222x199.png) * 使用了 content-box ![](https://box.kancloud.cn/68ab0d85c521ed9064b13e56b7569916_227x192.png) ~~~ 1. 設想下如果在div中設置了'padding' 內邊距，當我們在div中設置了背景色，并且添加了內容正常效果是什么樣？ 2.如圖正常效果和使用了'content-box' 效果 3.根據圖片可以看出背景顏色只會保持在內容區域 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height: 100px; background-color: beige; background-clip:content-box; border: 2px dotted red; margin: 50% auto; padding: 10px; } </style> </head> <body> <div> 111 </div> </body> </html> ~~~ >[info] ## 利用屬性去實現圖片效果 ~~~ 1.根據上面的屬性講解，其實就可以知道，因為默認情況下'border-box' 背景會延伸到邊框下面，即使我們讓背景透明，所展示映射的也是當前div 的背景，也不是我們希望的div所在的背景上的背景色 2.想實現因此使用'background-clip: padding-box;' 3.可以使用'rgba' 或者 'hsla' 來設置邊框透明 4.em 單位表示，子元素字體大小的em是相對于父元素字體大小 ~~~ >[danger] ##### 實現代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { /* background: url('http://csssecrets.io/images/stone-art.jpg'); */ background: skyblue } .div1 { border: 10px solid hsla(0,0%,100%,.5) ; background: white; background-clip: padding-box; /* styling */ max-width: 20em; padding: 2em; margin: 2em auto 0; font: 100%/1.5 sans-serif; } </style> </head> <body> <div class="div1"> 測試11 </div> </body> </html> ~~~