css3怎么實現透明效果

這篇“css3怎么實現透明效果”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css3怎么實現透明效果”文章吧。

 一 css3透明

css3中可以通過設置RGBA來實現透明效果.

RGBA在RGB的基礎上加入Alpha通道,通過設置Alpha值可以實現透明效果.

rgba(255,255,255,0)

R:紅色值. 正整數或百分比

G:綠色值. 正整數或百分比.

B:藍色值.正整數或百分比.

A:透明度.取值0~1之間.

html代碼

<nav>

<ul>

<li><a href="#">加油</a></li> <!--href="#"是鏈接本頁的意思,會跳到頁面開始的地方,但是不會刷新網頁-->

<li><a href="#">努力</a></li>

<li><a href="#">奮斗</a></li>

<li><a href="#">自強</a></li>

</ul>

</nav>

css代碼:

nav  ul{  background:linear-gradient(90deg,rgba(255,255,255,0)0%,rgba(255,255,255,0.2)25%,rgba(255,255,255,0.2)75%,rgba(255,255,255,0)100%);

box-shadow:0 0 25px rgba(0,0,0,0.1),

inset 0 0 1px rgba(255,255,255,0.6); }

nav ul li{display:inline-block;}

nav ul li a{padding:10px; color:#FFFFFF; font-size:18px; font-family:Arial; text-decoration:none; display:block;}

由于使用了display:inline-block;所以這個無序列表顯示在了一行里面.如果去掉nav  ul li{display:inline-block;},當然這行代碼也可是寫成 li{ display: inline-block; }  li元素嵌套在nav元素和ul元素里面.

二 css3文本陰影

text-shadow屬性定義一個或多個以逗號分隔的陰影效果,應用于當前元素的文本內容.

text-shadow屬性格式:text-shadow:x-offset(必需) y-offset(必需) blur(可選) color(可選);

color值不是必需的,但由于文本陰影的默認值是透明的,除非指定顏色值,否則不會顯示文本陰影.

css代碼:

p.text-shadow{text-shadow:-10px 5px 5px red;font-size:20px; }

text-shadow屬性可以通過","逗號分割同時創建的多個陰影.

在css3中越先定義的陰影效果會被放置在越頂層(別的陰影的上面),反正則相反.

以上就是關于“css3怎么實現透明效果”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。