資訊專欄INFORMATION COLUMN
摘要：默認(rèn)狀態(tài)下，背景會(huì)延伸到邊框的區(qū)域下層可以通過(guò)屬性來(lái)調(diào)整上述默認(rèn)行為所帶來(lái)的不便這個(gè)屬性的初始值是，意味著背景會(huì)被元素的邊框的外沿框裁切掉實(shí)現(xiàn)半透明邊框代碼如下通過(guò)設(shè)置通道然后具體效果見(jiàn)鏈接
1、默認(rèn)狀態(tài)下，背景會(huì)延伸到邊框的區(qū)域下層
2、可以通過(guò) background-clip 屬性來(lái)調(diào)整上述默認(rèn)行為所帶來(lái)的不便；這個(gè)屬性的初始值是 border-box， 意味著背景會(huì)被元素的 border box（邊框的外沿框） 裁切掉
實(shí)現(xiàn)半透明邊框代碼如下：
body {
background-image: url("./images/stone-art.jpg")
}
div {
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
/* 通過(guò)border設(shè)置a通道 然后background-clip: padding-box */
background-color: #fff;
border: 10px solid hsla(0, 0%, 100%, .5);
background-clip: padding-box
}
Can I haz semi-transparent borders? Pretty please?
具體效果見(jiàn) 鏈接
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85207.html
摘要：默認(rèn)狀態(tài)下，背景會(huì)延伸到邊框的區(qū)域下層可以通過(guò)屬性來(lái)調(diào)整上述默認(rèn)行為所帶來(lái)的不便這個(gè)屬性的初始值是，意味著背景會(huì)被元素的邊框的外沿框裁切掉實(shí)現(xiàn)半透明邊框代碼如下通過(guò)設(shè)置通道然后具體效果見(jiàn)鏈接 1、默認(rèn)狀態(tài)下，背景會(huì)延伸到邊框的區(qū)域下層2、可以通過(guò) background-clip 屬性來(lái)調(diào)整上述默認(rèn)行為所帶來(lái)的不便；這個(gè)屬性的初始值是 border-box， 意味著背景會(huì)被元素的 bor...
摘要：先來(lái)說(shuō)說(shuō)漸變吧效果圖如下所示也就是說(shuō)真正的漸變只出現(xiàn)在容器從到的高度區(qū)域如果把兩個(gè)色標(biāo)合在一起，會(huì)怎樣呢是這樣規(guī)定的如果多個(gè)色標(biāo)具有相同的位置，它們會(huì)產(chǎn)生一個(gè)無(wú)限小的過(guò)渡區(qū)域，過(guò)渡的起止色分別是第一個(gè)和最后一個(gè)指定值。 先來(lái)說(shuō)說(shuō)漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說(shuō)真正的漸變只出現(xiàn)在容器 60%...
摘要：先來(lái)說(shuō)說(shuō)漸變吧效果圖如下所示也就是說(shuō)真正的漸變只出現(xiàn)在容器從到的高度區(qū)域如果把兩個(gè)色標(biāo)合在一起，會(huì)怎樣呢是這樣規(guī)定的如果多個(gè)色標(biāo)具有相同的位置，它們會(huì)產(chǎn)生一個(gè)無(wú)限小的過(guò)渡區(qū)域，過(guò)渡的起止色分別是第一個(gè)和最后一個(gè)指定值。 先來(lái)說(shuō)說(shuō)漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說(shuō)真正的漸變只出現(xiàn)在容器 60%...
閱讀 1959·2021-11-24 11:16
閱讀 3292·2021-09-10 10:51
閱讀 3268·2021-08-03 14:03
閱讀 1294·2019-08-29 17:03
閱讀 3279·2019-08-29 12:36
閱讀 2269·2019-08-26 14:06
閱讀 522·2019-08-23 16:32
閱讀 2755·2019-08-23 13:42
