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

css如何讓邊框透明

藏色散人
發布: 2023-01-06 11:12:54
原創
5847 人瀏覽過

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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
css找不到
來自於 1970-01-01 08:00:00
0
0
0
thinkPHP引入css無效
來自於 1970-01-01 08:00:00
0
0
0
css的.header
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板