CSS基础总结

颜色表示方法

1.  十六进制 ：#FFF
2. RGB ：rgb(255, 255, 255);
3. RGBA ：rgba(255, 0, 255, 0.5) //最后一个值是alpha 透明度，取值范围为[0, 1]
4. HSL ：hsl(hue, saturation, lightness) //hue取值范围为[0, 360]， saturation, lightness为百分比，取值[0%, 100%]
5. HSLA ：hsla(hue, saturation, lightness, opaque) 类似RGBA
6. 预定义的color name ：red, green ...

---

透明度设置

使用属性：opacity：0.5; 取值范围[0,1]

1、IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

2、IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

---

 边框-CSS3

 三个重要边框属性：

1. border-radius
2. box-shadow
3. border-image

兼容性：

1. IE 9+ 支持 border-radius 和 box-shadow 属性。
2. Firefox、Chrome 以及 Safari 支持所有新的边框属性。
3. 对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。
4. Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

用法：

1、border-radius：px 或者 %，可以设置四个方向的

2、box-shadow：h-shadow v-shadow blur spread color inset;

3、border-image：包括 border-image-source 路径, border-image-slice向内偏移, border-image-width宽度, border-image-outset 边框图像区域超出边框的量,border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

---

 

 

转载于:https://www.cnblogs.com/hemi/p/4008450.html