边框
1.border-radius 圆角 px %
一个值 作用于4个边角
两个值 顺序 左上 右上 右下 左下 依次执行 没有值得找对家
三个值 顺序 左上 右上 右下 左下 依次执行 没有值得找对家
四个值 顺序 左上 右上 右下 左下 依次执行
画圆 正方形 边框半径就是正方形宽高的一半
2.box-shadow 边框阴影
水平阴影 垂直阴影 阴影大小 颜色
四个值都要写
颜色不写 默认黑色
只写2个值 模糊度为0
至少两个值
可以水平方向设为0，起到三面阴影的效果
CSS3 渐变
作用于背景background
gradients 不是属性，更类似于函数
1.线性渐变
linear-gradient
background: linear-gradient(red,yellow);
至少两种颜色
可以放无数个颜色
默认从上到下
自定义 top bottom left right
2.径向渐变
background: radial-gradient(red,blue)
以中心点未开始，向外平缓过渡
文本效果
1.text-shadow（文本阴影）
2.word-wrap:break-word 强调的是是否打断长单词 先换行 装不下就打断
word-break: break-all 强调怎样打断 不换行直接打断
过渡
transition: 属性名 时间 速度曲线 何时开始;
linear规定以相同速度开始至结束的过渡效果
ease 慢速开始，然后变快，慢速结束
ease-in规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始、慢速结束的过渡效果
transition: width 1s linear 1s;
文字描边
-webkit-text-stroke:.5px pink;
webkit内核专属 描边大小 颜色
旋转
transform 想显示什么效果，就用什么函数
1.rotate()旋转 对行内元素无效
单位 deg 度
1.正值 顺时针
2.负值 逆时针
skew 倾斜
单位 deg
一个值 transform: skew(45deg); 默认x轴倾斜45deg
两个值 transform: skew(0deg,60deg); 第一个x轴 第二个是y轴
skewX x轴倾斜
skewY y轴倾斜
scale 缩放
单位倍数 按照你给倍数进行缩放
一个值 宽高都放大x倍
两个值 第一个值是宽 第二个是高
正值
负值 翻过来放大
transform: scale(4,2)
translate 位移
移动的知识我们看到的，在文档流中的实际位置没有变
相对于自身原来位置移动
一个值 x轴移动
两个值 第一个沿着x轴移动 第二个沿着y轴移动
正值 如果x轴->右 y轴->下
负值 x轴->左 y轴->上
translateX 沿着x轴移动
translateY 沿着y轴移动
相对于自身原来位置移动
Transform 3D
rotateX() 元素围绕其 X 轴以给定的度数进行翻转
rotateY() 元素围绕其 Y 轴以给定的度数进行翻转
translate3d()
此函数用来规定指定元素在三维空间中的位移。
translate3d(x,y,z)
1.x:表示在 x 轴方向的位移。
2.y:表示在 y 轴方向的位移。
3.z:表示在 z 轴方向的位移。
动画
@keyframes 规则
如需在 CSS3 中创建动画，需要学习 @keyframes 规则。
写规则时至少包含以下两个属性
规定动画的名称
规定动画的时长
写好规则，再使用 animation 属性来应用到某个元素
@keyframes 规则 定义动画执行
animation: pink 3s;调用规则
infinite 无限
@keyframes xuecao {
0%{width:100px;}
/*20%{width:150px;}*/
50%{width:200px;}
80%{width:100px;}
100%{width:200px;}
}
div:hover{
animation: xuecao 3s linear;
}
div{
width:198px;
height:198px;
background: url("img/cd.png");
border-radius: 99px;
margin:0 auto;
animation: cdddd 10s linear infinite;
}
@keyframes cdddd {
from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}