首頁 >web前端 >css教學 >使用 CSS 建立衰減陰影

使用 CSS 建立衰減陰影

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB轉載: 2023-08-26 08:25:091697瀏覽

使用 CSS 创建衰减阴影

陰影濾鏡用於在指定的方向和顏色中建立衰減的陰影。

可以在此濾鏡中使用以下參數−

##參數和描述12範例

#序號
	#您想要的陰影顏色。
	#方向模糊的方向，順時針方向，以45度為增量。預設值為270（左）。 0 = 頂部 45 = 右上 90 = 右邊 135 = 右下方 ##180 = 底部 225 = 左下 270 = 左邊 315 = 左上

#序號

#您想要的陰影顏色。

#方向模糊的方向，順時針方向，以45度為增量。預設值為270（左）。

0 = 頂部

45 = 右上

90 = 右邊

135 = 右下方

##180 = 底部

225 = 左下

270 = 左邊

315 = 左上

您可以嘗試執行以下程式碼來實作陰影濾鏡−

示範

<html>
   <head>
   </head>

   <body>

      <img src="/static/imghwm/default1.png"  data-src="/css/images/logo.png"  class="lazy" alt="CSS Logo"  style="max-width:90%">

      <p>Text Example:</p>

      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family:
         Arial Black;
         color: red;
         Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>
   </body>

</html>

以上是使用 CSS 建立衰減陰影的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 CSS 淡入動畫效果下一篇：使用 CSS 淡入動畫效果

看更多