圆角
border-radius:圆角 圆角后面可以跟四个值分别是左上右上右下左下
box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 盒阴影
背景尺寸和起始位置
background-size:背景图片的尺寸
background-origin:背景图片开始的地方content-box(从内容开始)、padding-box(默认从内边距开始) 、border-box (从边框开始);
box-sizing:content-box(宽和高的修改只对内容有效),border-box(宽和高的对边框有效)
文本效果:
text-shadow:文本阴影(h-shadow 水平位置,v-shadow垂值位置,blur模糊程度,color颜色;)
word-wrap:自动换行(normal 默认值,不换行/break-word强制换行)只对英文有效,中文一般不需要
column-count:文字被分成几列
column-gap 列和列之间的间隔
2d/3d转换
transform:translate(top,left)延x轴,y轴移动,用来居中
rotate(30deg):顺时针旋转
scale(1.1):按比例放大和缩小
skew(30deg,20deg):分别根据两个轴进行旋转;
过渡
transition:width 2s;过渡效果需要的时间
动画;
@keyframes myfirst后面跟的是动画名称
{from{background:red;}也可以用%来写
to{background:yellow;}
}
animation:动画名 2s;通过animation来调用