使用 CSS 设置阴影效果

前端开发教程 2025-01-14 0

Drop Shadow 用于在指定的 X（水平）和 Y（垂直）偏移量和颜色处创建对象的阴影。

此过滤器中可以使用以下参数：

参数	描述
颜色	颜色，采用 #RRGGBB 格式，阴影。
offX	投影沿 x 轴从视觉对象偏移的像素数。正整数将投影向右移动，负整数将投影向左移动。
offY	阴影沿 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 设置阴影效果的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。