當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS制作一个半透明边框

發布時間：2023/12/10 CSS 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS制作一个半透明边框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS制作一個半透明邊框

1.?知識儲備
2.?具體實現
3.?總結

1.?知識儲備

對于如何使用 CSS 制作一個半透明邊框，首先你要知道 background-clip 這個屬性

background-clip: 設置元素的背景（背景圖片或顏色）是否延伸到邊框、內邊距盒子、內容盒子下面（即用來確定背景繪制區域）

可以去 MDN 文檔中 background-clip 具體學習一下它的用法。
它有著以下四個值：

border-box: [ 默認值 ] 背景繪畫邊框外沿（在邊框下層，即這個元素會遮擋住背景）
padding-box: 背景延伸至內邊距（padding）外沿不會繪制到邊框處
content-box: 背景被裁剪至內容區（content box）外沿
text: 背景被裁剪成文字的前景色

2.?具體實現

先建立兩個盒子出來

此時效果如下：

這個時候，要給里面那個盒子加一個半透明邊框，可以給它增添一個邊框樣式，里面使用 background-clip 屬性。

/* 設置邊框的大小和顏色---半透明 */ border: 10px solid hsla(0, 0%, 100%, 0.5); /* 設置 background-clip 屬性的值為 padding-box，背景就會延伸到內邊距的外沿 */ background-clip: padding-box;

完整代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>半透明邊框</title><style>.box1 {display: flex;justify-content: center;align-items: center;margin: 0 auto;height: 300px;width: 300px;background-color: gray;}.box2 {height: 150px;width: 200px;background-color: aqua;/* background-clip 屬性書寫位置注意！！！寫于該元素的背景顏色的后面，如果寫于前面，則 background-clip 屬性不會產生作用 */border: 10px solid hsla(0, 0%, 100%, 0.5);background-clip: padding-box; }</style> </head> <body><div class="box1"><div class="box2"></div> </div> </body> </html>

這樣，我們就實現了一個半透明的邊框了，效果如下：

3.?總結

實現半透明邊框：

設置邊框的大小和顏色 - - - 半透明

border: 10px solid hsla(0, 0%, 100%, 0.5);

設置 background-clip 屬性的值為 padding-box，使背景延伸到內邊距的外沿

background-clip: padding-box;

Tips:

根元素具有不同的背景繪制區域，因此在對其指定時， background-clip 屬性無效
如果存在背景，背景始終繪制在邊框后面

總結

以上是生活随笔為你收集整理的CSS制作一个半透明边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
边框