1.边框
1.1圆角
border-radius:25px;
1.2盒阴影
box-shadow: 10px 10px 5px #888888;
这个属性挺重要的,特别是做图片的效果时.
box-shadow: 阴影的x偏移值,阴影的y偏移值,模糊值,阴影大小,阴影颜色
其中偏移值可以为负数,阴影大小为0时是与原来一样大,模糊值越大越模糊
1.3边界图片
border-image:url(border.png) 30 30 round;
2.背景
多重背景图像,你可以通过透明图像来实现多个图像的叠加
2.1background-image
可以设置多个背景图片,并这样设置
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat; 2.2background-size
background-size:80px 60px;
2.3background-origin
定位背景图片可以放的位置
content-box, padding-box,和 border-box
2.4background-clip
裁剪
这个用到的也是这三个content-box, padding-box,和 border-box
3.渐变
rgba(0, 0, 0, .5);
前三个值:0~255,red,green,blue
最后一个:0~1 0完全透明,1完全不透明
3.1线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
3.1.1使用角度
background: linear-gradient(180deg, red, blue);
3.1.2使用多个颜色结点
background: linear-gradient(red, green, blue);
3.1.3使用透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
3.1.4重复渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
注意,有个repeating
3.2径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
3.2.1颜色结点不均匀分布
background: radial-gradient(red 5%, green 15%, blue 60%);
3.2.2设置形状
ackground: radial-gradient(circle, red, yellow, green);
4.文本效果
4.1text-shadow
text-shadow: 5px 5px 5px #FF0000;
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
4.2box-shadow
box-shadow: 10px 10px 5px #888888;
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
4.3text-overflow
4.3.1text-overflow:ellipsis
多余的以...来代替
4.3.2text-overflow:clip
多余的遮住
4.4word-wrap
单词换行
4.5word-break
规定非中日韩文本的换行规则。
4.6text-align-last
文本最后一行对齐
5.2D 转换
元素进行移动、缩放、转动、拉长或拉伸
5.1translate()移动
transform: translate(50px,100px);
5.2rotate()旋转
transform: rotate(30deg);
5.3scale()元素放大缩小
transform: scale(2,3); 2倍,3倍
5.4skew()倾斜
transform: skew(30deg,20deg); x轴30°,y轴20°
5.5matrix()合并成一个
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0);
12:斜拉,34:缩放,5:旋转,6位移
6.box-sizing:border-box的使用
为什么要使用?
解决,宽高相同,而内边距不同所造成的元素大小不同
如果使用了该属性,则内边距也算入宽高中
7.使用弹性盒子:实现完全居中
类似这样的!
只需要将父容器设置display为flex,然后需要完全居中显示的子元素设置margin为auto
