CSS3 常用屬性總結
阿新 • • 發佈:2019-01-03
CSS3常用屬性總結
一、box-shadow
定義:向框新增一個或多個陰影
語法:
box-shadow: h-shadow v-shadow blur spread color inset;
eg: box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
二、gradient 漸變
線性漸變:linear-gradient
1、在Mozilla的應用
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop > [, <stop>]* )
第一個引數表示線性漸變的方向,top是從上到下、left是從左到右,如果定義成left top,那就是從左上角到右下角。
第二個和第三個引數分別是起點顏色和終點顏色。
eg:
background: -moz-linear-gradient( top,#ccc,#000);
2、在webkit的應用 -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
3、在opera的應用
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])
徑向漸變:radial-qradient
三、filter 濾鏡
filter: none | <filter-function > [ <filter-function> ]*
filter-function 取值:- grayscale 灰度 預設值100%
.grayscale
- sepia 褐色 預設值100%
.sepia{ -webkit-filter:sepia(a); }
- saturate 飽和度 預設值100%
.saturate{ -webkit-filter:saturate(a); }
- hue-rotate 色相旋轉 預設值0deg
.hue-rotate{ -webkit-filter:hue-rotate(a); }
- invert 反色 預設值100%
.invert{ -webkit-filter:invert(a); }
- opacity 透明度 預設值100%
.opacity{ -webkit-filter:opacity(a); }
- brightness 亮度 預設值100%
.brightness{ -webkit-filter:brightness(a); }
- contrast 對比度 預設值100%
.contrast{ -webkit-filter:contrast(a); }
- blur 模糊 預設值0
.blur{ -webkit-filter:blur(apx); }
- drop-shadow 陰影
.drop-shadow{ -webkit-filter:drop-shadow(apx apx apx color); }
四、box-sizing 指定盒子屬性模型
box-sizing:content-box(default)
box-sizing:border-box
box-sizing:padding-box