CSS揭秘之《制作半透明邊框》

Berwin 發布于2019-08-20 19:08 / 1261人閱讀

摘要：默認狀態下，背景會延伸到邊框的區域下層可以通過屬性來調整上述默認行為所帶來的不便這個屬性的初始值是，意味著背景會被元素的邊框的外沿框裁切掉實現半透明邊框代碼如下通過設置通道然后具體效果見鏈接

1、默認狀態下，背景會延伸到邊框的區域下層
2、可以通過 background-clip 屬性來調整上述默認行為所帶來的不便；這個屬性的初始值是 border-box，意味著背景會被元素的 border box（邊框的外沿框）裁切掉
實現半透明邊框代碼如下：

         body {
            background-image: url("./images/stone-art.jpg")
        }

        div {
            max-width: 20em;
            padding: 2em;
            margin: 2em auto 0;
            font: 100%/1.5 sans-serif;
            /* 通過border設置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?

具體效果見鏈接

云服務器 GPU云服務器半透明半透明效果半透明度 html標簽半透明

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85207.html

CSS揭秘之《制作半透明邊框》

摘要：默認狀態下，背景會延伸到邊框的區域下層可以通過屬性來調整上述默認行為所帶來的不便這個屬性的初始值是，意味著背景會被元素的邊框的外沿框裁切掉實現半透明邊框代碼如下通過設置通道然后具體效果見鏈接 1、默認狀態下，背景會延伸到邊框的區域下層2、可以通過 background-clip 屬性來調整上述默認行為所帶來的不便；這個屬性的初始值是 border-box，意味著背景會被元素的 bor...

xiaodao 2019-08-29 13:20 評論0 收藏0
CSS揭秘之《條紋背景》

摘要：先來說說漸變吧效果圖如下所示也就是說真正的漸變只出現在容器從到的高度區域如果把兩個色標合在一起，會怎樣呢是這樣規定的如果多個色標具有相同的位置，它們會產生一個無限小的過渡區域，過渡的起止色分別是第一個和最后一個指定值。先來說說漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說真正的漸變只出現在容器 60%...

jsliang 2019-08-20 19:08 評論0 收藏0
CSS揭秘之《條紋背景》

摘要：先來說說漸變吧效果圖如下所示也就是說真正的漸變只出現在容器從到的高度區域如果把兩個色標合在一起，會怎樣呢是這樣規定的如果多個色標具有相同的位置，它們會產生一個無限小的過渡區域，過渡的起止色分別是第一個和最后一個指定值。先來說說漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說真正的漸變只出現在容器 60%...

phpmatt 2019-08-29 13:20 評論0 收藏0