CSS3精要
# CSS3精要
# 1、前缀
-webkit-(chrome和Safari)、-moz-(firefox)、-ms-(IE)、-o-(opera)
1
# 2、边框相关
【圆角】border-radius: 5px 4px 3px 2px; # 顺时针
【阴影】box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; #默认外阴影
box-shadow:4px 2px 6px #333333; #外阴影
box-shadow:4px 2px 6px #333333 inset; #内阴影
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; #多阴影
【边框图片】border-image: 图片路径 像素顺时针 延伸方式(repeat重复 round平铺 stretch 拉伸)
border-image:url(border.png) 30 30 round;
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3、背景 background
【大小】background-size: auto | <长度值> | <百分比> | cover | contain
【原点】background-origin : border-box | padding-box | content-box;
【裁剪】background-clip : border-box | padding-box | content-box | no-clip
【多重背景】background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
background:url(logo_index.png) no-repeat left top/75% 50% , url(logo_index.png) no-repeat right bottom/50% 45%;
1
2
3
4
5
2
3
4
5
# 4、渐变
#默认从上到下、可以改变方向和角度
【线性渐变】linear-gradient([ [ <角度> | to <方向> ] ,]? <色值>[, <色值>]+)
【径向渐变】adial-gradient([ [ <形状> || <尺寸> ] [ at <位置> ]? , | at <位置>, ]?<色值>[ , <色值> ]+)
<位置> = [ <长度值> | <百分比>| left | center | right ]? [ <长度值> | <百分比> | top | center | bottom ]?
<形状> = circle | ellipse 圆|椭圆
<尺寸> = <程度关键字> | [ <圆尺寸> || <椭圆尺寸> ]
<程度关键字> = closest-side | closest-corner | farthest-side | farthest-corner
<圆尺寸> = <length>
<椭圆尺寸> = [ <length> | <percentage> ]{2}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 5、文本效果
【阴影】text-shadow:X偏移 Y偏移 模糊程度 阴影颜色;
text-shadow: 5px 5px 5px #FF0000;
【文本溢出】text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
1
2
3
2
3
# 6、字体
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
调用:font-family: 字体名称;
1
2
3
4
5
2
3
4
5
# 7、2D变形 transform
rotate(x) #旋转:顺时针 transform:rotate(20deg)
skew(x,y) #扭曲/拉伸:以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
skewX(x) #仅水平
skewY(y) #仅垂直
scale(x,y) #缩放
scaleX(x) #仅水平;
scaleY(y) #仅垂直
translate(x,y) #位移:类似于position中的relativetranslateX(x)、translateY(y) transform:translate(-50%,-50%);
matrix(a,b,c,d,e,f) #矩阵:
matrix(1, 0, 0, 1, x, y) #位移
matrix(x, 0, 0, y, 0, 0) #缩放
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) #旋转
matrix(1,tan(θy),tan(θx),1,0,0) #扭曲
matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0) #镜像对称
transform-origin #原点:默认为中心点为原点 transform-origin: top right;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 8、3D变形
【位移】 translate3d(x,y,z)、translateZ(z)
【缩放】 scale3d(x,y,z)、scaleZ(z)
【旋转】 rotate3d(x,y,z,angle)、rotateZ(angle)
1
2
3
2
3
# 9、过渡 transition
transition-property #指定过渡或动态模拟的CSS属性 transition-property: all;width,height,background...
transition-duration #指定完成过渡所需的时间 transition-duration: 1s;
transition-timing-function #指定过渡函数:ease(默认) ease:由快到慢; linear:恒速;ease-in:加速(渐显);ease-out:减速(渐隐)ease-in-out:先加速再减速
transition-delay #指定开始出现的延迟时间
transition #缩写:顺序按以上属性从上到下 transition: all .5s ease-in .2s;
transition: transition-property transition-duration transition-timing-function transition-delay
1
2
3
4
5
6
2
3
4
5
6
# 10、动画 animation
参数名 参数 默认值 参数值
@keyframes #关键帧 0%~100%(0%和100%等效于from和to)
animation-name #调用动画 none | IDENT
animation-duration #播放时间 <time>
animation-timing-function #播放方式 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
animation-delay #延迟时间 <time>
animation-iteration-count #播放次数 infinite | <number>(infinite:无限次)
animation-direction #播放方向 normal | alternate(alternate:来回循环)
animation-play-state #播放状态 running running|paused(播放|暂停)
animation-fill-mode #时间外属性 none|forwards|backwords|both
animation #写缩 : name duration timing-function delay iteration-count direction;
animation: myfirst 5s linear 2s infinite alternate;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 11、多列布局
【多列布局】 columns:<column-width> || <column-count>;column-width: auto | <length>;column-count:auto | <integer>;
【列间距】 column-gap: normal || <length>
【列表边框】 column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
【跨列设置】 column-span: none | all
1
2
3
4
2
3
4
# 12、外轮廓属性
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
outline-color #定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。
outline-style #定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。
outline-width #定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。
outline-offset #定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。
inherit #元素继承父元素的outline效果。
outline:2px solid red;
outline-offset:15px;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 13、盒子模型
box-sizing: content-box | border-box | inherit
1
# 14、自由缩放属性
resize:none | both | horizontal | vertical | inherit
1
上次更新: 2020/09/27, 13:09:00