浅析几个CSS3常用功能的写法

2020-05-01 10:01:21易采站长站整理

复制代码
DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#999999′, GradientType=’0′);

IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

四、透明(opacity)

正常情况下,上层的对象会覆盖下层的对象。

但是,如果将上层对象的颜色变为透明,就可以透过它看到下层对象。

复制代码
.box_rgba {
  background-color: #B4B490;
  background:transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′); /* IE6,IE7 */
  -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′)”; /* IE8 */
  zoom: 1;
  background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
}

先看第一行。

复制代码
background-color: #B4B490;

这是设置对象的预备色,也就是不透明时的颜色。如果浏览器不支持透明,就将显示这个颜色。

复制代码
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′); /* IE6,IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′)”; /* IE8 */
zoom: 1;

这几行是专门为IE写的,其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色(startColorstr)和终点色(endColorstr)。在单色透明的情况下,这两个值是相同的。需要注意的是,它们的取值是一个八位的十六进制值,前两位表示alpha通道值,00表示完全透明,FF表示完全不透明;后六位则是这个颜色的RGB值。

复制代码
background-color: rgba(180, 180, 144, 0.6);

除了IE,其他浏览器几乎都支持rgba函数。它有四个参数,前三个为一种颜色的RGB值,第四个为透明度,这里设为0.6。

五、旋转(rotation)

复制代码
.box_rotate {
  -moz-transform: rotate(7.5deg); /* FF3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’);