一、圆角边框与阴影
border-top-left-radius | 左上角的形状 |
border-top-right-radius | 右上角的形状 |
border-bottom-left-radius | 左下角的形状 |
border-bottom-right-radius | 右下角的形状 |
border-radius | 水平值 垂直值 |
(圆角边框添加各种前缀的扩展)bdrs + Tab:
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
inset | 可选,内部阴影 |
outset | 默认值,外部阴影 |
(圆角边框添加各种前缀的扩展)bxsh + Tab:
-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
二、文本与文字
(1)、text-shadow属性: (同box-shadow)
例:
h1 {
text-shadow: 0 0 3px #F00; (只有模糊外散效果)
}
h1 {
color:white(白色);
text-shadow: 2px 2px 4px #F00(投影效果黑色); (有凸起浮雕的效果)
}
(2)、world-wrap属性:允许长单词、URL强制进行换行
break-world、normal
(3)、@font-face规则属性:
三、2D转换(对元素进行旋转、缩放、移动、拉伸)
(旋转的扩展): trfm + Tab : -webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
transform属性: rotate()(旋转) scale()(缩放)
旋转---transform:rotate(数字deg);(正数顺时针转,负数逆时针转)
缩放---transform:scale(x,y);-----分水平和垂直方向缩放的倍数(0~1,缩小)(>1放大)
四、过渡与动画
1.(过渡:一个状态在指定的时间内到另一个状态): transition属性:
transition-property | 属性名 / all 对那个属性进行变化 |
transition-duration | 持续时间 |
transition-timing-function | 过渡使用的方法(函数) |
(简写) transition: 属性名 持续时间 过渡方式;
值 | 描述 |
linear | 匀速 |
ease | 慢快慢 |
ease-in | 慢快 |
ease-out | 快慢 |
ease-in-out | 慢快慢 |
2.(动画:若干种状态之间的转换):@keyframes animation属性
(1)定义动画:@keyframes规则
(2)调用动画:anmation属性
值 | 描述 |
animation | 简写 |
animation-name | 引用@keyframes动画的名称 |
animation-duration | 动画完成时间 |
animation-timing-function | 规定动画的速度曲线、默认是"ease" |
animation-play-state | running | paused |
(简写)animation: 名字 时长 方式;
五、3D变换
1.3D
transform-style : preserve-3d ;
2.旋转
transform属性:(x轴:指向右 y轴: 指向上 z轴:指向屏幕外)
rotateX();
rotateY(); 角度deg(绕x、y、z旋转)
rotateZ();
3.透视(无透视会被压缩)
perspective属性(像素值越小,表示离得越近)