使用 CSS 設定陰影效果-css教學-PHP中文網

#陰影沿著 y 軸偏離視覺物件的像素數。正整數使陰影向下移動，負整數使陰影向上移動。

首頁

web前端

css教學

使用 CSS 設定陰影效果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 06:33 PM

使用 CSS 设置阴影效果

Drop Shadow 用於在指定的 X（水平）和 Y（垂直）偏移和顏色處建立物件的陰影。

此篩選器中可以使用下列參數：

##顏色offXoffY

#參數	描述


#顏色，採用#RRGGBB 格式，陰影。
#投影沿著 x 軸從視覺物件偏移的像素數。正整數將投影向右移動，負整數將投影向左移動。

#陰影沿著 y 軸偏離視覺物件的像素數。正整數使陰影向下移動，負整數使陰影向上移動。

正############如果為 true，則物件的所有不透明像素都有陰影。如果為 false，則所有透明像素都有陰影。預設為 true。 #####################範例######您可以嘗試執行以下程式碼來設定drop陰影效果：######現場示範## #

<html>
   <head></head>
   <body>
      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "Filter: Chroma(Color = #000000)
         DropShadow(Color = #FF0000,
         OffX = 2,
         OffY = 2, Positive = 1)">
      <p>Text Example:</p>
      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
   </body>
</html>

登入後複製

###

以上是使用 CSS 設定陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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