CSS特殊样式（透明、旋转、阴影）

最新推荐文章于 2022-04-28 20:14:49 发布

lijifa518

最新推荐文章于 2022-04-28 20:14:49 发布

阅读量869

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS+Js 文章标签： css

本文链接：https://blog.youkuaiyun.com/lijifa518/article/details/38185375

CSS+Js 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了CSS中的透明度、旋转角度与阴影效果的实现方式，包括如何使用透明度滤镜、旋转角度转换及阴影生成属性。详细解释了每个属性的作用、语法和应用实例，旨在帮助开发者更熟练地运用这些样式属性来增强网页元素的视觉表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

透明

{  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}

旋转角度

{
       <span style="white-space:pre">	</span>-ms-transform:rotate(-8deg);       /* IE 9 */
<span style="white-space:pre">	</span>-moz-transform:rotate(-8deg);     /* Firefox */
<span style="white-space:pre">	</span>-webkit-transform:rotate(-8deg); /* Safari and Chrome */
<span style="white-space:pre">	</span>-o-transform:rotate(-8deg);          /* Opera */
<span style="white-space:pre">	</span>transform:rotatec(-8deg);
}

阴影

 { box-shadow: h-shadow v-shadow blur spread color inset;}

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊距离。	测试
spread	可选。阴影的尺寸。	测试
color	可选。阴影的颜色。请参阅 CSS 颜色值。	测试
inset	可选。将外部阴影 (outset) 改为内部阴影。	测试