CSS 中 border: 1px solid rgba(0, 0, 0, 0.1); 是什么意思?


意思是: 設定元素的邊框為 1 像素寬、實線、顏色使用 rgba 來表達。

其中,rgba 是 CSS3 中的屬性。rgba 括號中前 3 個數字代表着 red green blue 三種顏色的 rgb 值(0-255),最后一個是設定這個顏色的透明度即 alpha 值。范圍從 0 到 1,越接近 1,代表透明度越低。

 

使用透明度(transparent)

CSS3 漸變也支持透明度(transparent),可用於創建減弱變淡的效果。

為了添加透明度,我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最后一個參數可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。

下面的實例演示了從左邊開始的線性漸變。起點是完全透明,慢慢過渡到完全不透明的紅色:

實例

從左到右的線性漸變,帶有透明度:

#grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */ background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/ background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標准的語法 */ }

CSS3 線性漸變

為了創建一個線性漸變,你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時,你也可以設置一個起點和一個方向(或一個角度)。

線性漸變的實例:

線性漸變

語法

background: linear-gradient( directioncolor-stop1color-stop2, ...);

線性漸變 - 從上到下(默認情況下)

下面的實例演示了從頂部開始的線性漸變。起點是紅色,慢慢過渡到藍色:

實例

從上到下的線性漸變:

#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 標准的語法 */ }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM