當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS制作一个半透明边框

發(fā)布時(shí)間：2023/12/10 CSS 45 豆豆

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

CSS制作一個(gè)半透明邊框

1.?知識(shí)儲(chǔ)備
2.?具體實(shí)現(xiàn)
3.?總結(jié)

1.?知識(shí)儲(chǔ)備

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

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

可以去 MDN 文檔中 background-clip 具體學(xué)習(xí)一下它的用法。
它有著以下四個(gè)值：

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

2.?具體實(shí)現(xiàn)

先建立兩個(gè)盒子出來

此時(shí)效果如下：

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

/* 設(shè)置邊框的大小和顏色---半透明 */ border: 10px solid hsla(0, 0%, 100%, 0.5); /* 設(shè)置 background-clip 屬性的值為 padding-box，背景就會(huì)延伸到內(nèi)邊距的外沿 */ 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 屬性不會(huì)產(chǎn)生作用 */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>

這樣，我們就實(shí)現(xiàn)了一個(gè)半透明的邊框了，效果如下：

3.?總結(jié)

實(shí)現(xiàn)半透明邊框：

設(shè)置邊框的大小和顏色 - - - 半透明

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

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

background-clip: padding-box;

Tips:

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

css
边框