首頁 >web前端 >前端問答 >css如何讓邊框透明

css如何讓邊框透明

藏色散人
藏色散人原創
2021-05-13 14:50:485878瀏覽

css讓邊框透明的方法:先建立一個HTML範例檔;然後在body中建立一個div;最後透過給div設定「border-top:10px solid  rgba(200,200,200,0.25);」樣式即可讓指定的邊框透明。

css如何讓邊框透明

本文操作環境:windows7系統、HTML5&&CSS3版,DELL G3電腦

透明一般認為是一種顏色屬性,但並沒有這個數值。我們找到了讓div實現透明的最佳方案,運用RGBA

RGBA在RGB的基礎上多了控制alpha透明度的參數。 R(紅)、G(綠)、B(藍)三個參數,正整數值的值範圍為:0 – 255或用百分數值的值範圍為:0.0% – 100.0%。超出範圍的數值將被截至其最接近的值極限。並非所有瀏覽器都支援使用百分數值。 A參數,取值在0~1之間,不可為負值

RGBA語法範例:

.div {background: rgba(200,200,200,0.5);}

接下來示範如和讓邊框透明:

給div設定如下樣式:

div {    width: 100px;    
height:100px;    border-top:10px solid  rgba(200,200,200,0.25);    border-right:10px solid  rgba(200,200,200,0.5);    border-bottom: 10px solid  rgba(200,200,200,0.75);    border-left:10px solid  rgba(200,200,200,1);}

顯示效果如圖所示,每一邊的透明度都不一樣。當我們需要設定邊框的透明度的時候,根據需要填寫最後一個數值在0-1之間就可以了。

css如何讓邊框透明

學習影片分享:css影片教學

#

以上是css如何讓邊框透明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn