CSS3常见样式总结

设置弹性盒模型

box-sizing : border-box
注意

• 设置怪异模式之后，border不会把盒子撑大
• 设置怪异模式之后，padding不会把盒子撑大

限制textarea 禁止改变大小

resize : none;

设置外边线

outline-width : 2px;//设置外边框轮廓宽度
outline-style : solid;//设置外边框样式
transition : all 0.5s;//过渡效果
outline-offset : 30px;//设置外边框轮廓
outline-color : rgb(66, 192, 246, 0);//设置外边框轮廓颜色

多列布局

columns : auto //设置列宽 分列数
column-width : auto //设置列宽
column-count : 4 //设置分列数
column-gap : 10px //设置列间距
column-rule : 2px dashed gray; //设置列边线
注意： 当设置不同高度时会被减切变成统一高度

阴影

box-shadow: 0px 0px 0px 0px #4bd5ff;

• 水平阴影的位置,允许负值
• 垂直阴影的位置,允许负值
• 模糊距离
• 阴影的大小
• 阴影的颜色

设置边框图片

border-image-source : url("./img/12.jpg");//用在边框的图片的路径。
border-image-width: 50px;//图片边框宽度
border-image-slice: 0px;//图片边框向内偏移
border-image-outset: 0px;//边框图片超出边框的量
border-image-repeat: round;//图片边框是否平铺，可选参数：repeated 平铺，rounded 铺满， stretch 拉伸

背景属性

background-clip : content-box;//规定背景的绘制区域。
background-clip : border-box; //规定背景图片的定位区域。
background-clip : padding-box;//规定背景图片的尺寸。

弹性盒模型

display: flex; //设置弹性盒
flex-direction: row;//设置主轴方向
flex-wrap: nowrap;//是否换行显示
justify-content:space-around;//设置行的排列方式
align-items: baseline; //设置侧轴对齐方式
align-content: space-between;//弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

动画

transform: translate(0px,0px);//移动
transform:scale(1,1);//放大缩小
transform: rotate(0deg);//旋转
transform: skew(60deg,60deg);//倾斜
transform: matrix();//矩阵

过渡动画

animation: divMove 4s cubic-bezier(.2,-0.55,.25,1) 0.5s infinite alternate;

• 动画名称
• 执行时间
• 执行曲线
• 延迟间隔
• 播放次数
• 动画执行方式 是否反复执行

渐变色

background: linear-gradient(red, yellow);//默认自上向下渐变
background: linear-gradient(to right bottom,red, yellow);//控制渐变方向
background: linear-gradient(0deg,red, yellow);//控制渐变角度
background: linear-gradient(to right,rgba(255,0,0,0.8),rgba(255,255,0,0.4));//控制渐变透明度
background: linear-gradient(red,yellow 10%,blue 30%);// 控制渐变百分比