border-radius:圆角 输入百分比50%是一个圆形
box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 都是以像素为单位
background-origin:图片在div中开始的地方content-box是从内容开始、padding-box(默认) 或 border-box 是从边框开始;
box-sizing:content-box(默认),border-box;border-box设置后width/height包含border/padding/content设置到所有里面*{}
text-shadow文本阴影 word-wrap:自动换行 内容是英文使用
2D转换/3D转换:
transform:translate(top,left):从其当前位置移动;rotate(30deg):顺时针旋转给定的角度;scale(1.1):元素尺寸增加或减少;skew(30deg,20deg):翻转给定的角度,根据x轴和y轴;
过渡:
transition:width 2s; 添加这个属性要div有宽度或者高度的变化才可以,
6、动画:
@keyframes myfirst 这个是自定义的名字 用的时候调用这个名字 animation:动画名 2s写在元素里
{
from{background:red;}
to{background:yellow;}
}
实现简单的动画
.ab{
100px;
height: 100px;
border: 1px solid #000;
/* 用animation后面跟定义动画的名字 加时间来使用动画 */
animation:myfirst 10s;
}
@keyframes myfirst{
/* 这是定义背景颜色 */
from{background:red;}
to{background:yellow;}
/* 定义宽度 */
20%{
50px;
}
50%{
100px;
}
100%{
150px;
}
}