CSS 透明

透明度属性

1、rgba(r,g,b,a)颜色模式

• 兼容性：IE6、7、8下不兼容，IE9+支持

• 使用： background-color属性、color属性、border-color属性等中设置透明度

• 语法 rgba(r,g,b,a) r-red 取值范围0-255之间 g-green 取值范围0-255之间 b-blue 取值范围0-255之间 a-alpha 取值范围0-1之间表示半透明 1表示完全不透明 0表示完全透明

超出范围的值将被截至最近的极限值

2、opacity属性 透明度

• 兼容性：IE6、7、8下不兼容，IE9+支持

• 使用 将内容（及所有后代）、背景一起透明，自身透明，子元素也透明

• 取值 范围0-1之间表示半透明 0表示完全透明 1表示完全不透明

3、filter属性

• 兼容性：仅仅支持IE6、7、8、9，在IE10及以上被废除

• 使用： IE浏览器专属

• 语法 filter:Alpha(opacity=n) n的取值在0-100之间表示半透明，0表示完全透明，100表示完全不透明

• 想用filter实现父元素背景透明，子元素不透明：

  父元素加静态定位,子元素加相对定位,能阻止透明度的传递

.box盒子有透明度
.box{
    background: red;
    opacity: .4;/* IE9+ */
    filter: Alpha(opacity=40);/* IE6|7|8|9兼容  */
}
​
​
.box{
            width:300px;
            height: 300px;
            background:red;
            filter:Alpha(opacity = 30);
            position: static;
           
        }
​
        .box span{
            background:blue;
            font-size: 40px;
          position: relative;
         }
   <div class="box">
        <span>东方闪电</span>
    </div>
​

四、阴影

1、盒子阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）
​
​
h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。  必需    单位： px
v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。   必需   单位： px
blur：阴影模糊度，不能取负数。 可选    单位： px
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选    单位： px
inset：表示添加内阴影，默认为外阴影。可选  
    box-shadow: 0 0 20px 10px green inset;
当 spread 为0时，阴影大小与元素大小相同。
​
 .box1 {
            background-color: yellow;
            /* 多个阴影 */
            /* 盒子阴影 */
            box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;
        }

可以在一个元素上设置一个或多个阴影，阴影之间用逗号隔开

2、文字阴影

语法

text-shadow: h-shadow v-shadow blur color;
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;
​
h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊距离；
color 可选，阴影的颜色；
.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}

可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开