常用的CSS3属性

1. 多行文本超出省略号显示

普通单行显示(通用)

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行显示, 只支持chrome内核浏览器, 其它内核浏览器需要生成兼容代码

display: -webkit-box; 继承block的属性
-webkit-box-orient: vertical; 素垂直显示
-webkit-line-clamp: 4; 设置文本显示的行数
overflow: hidden;

2. 选中文本设置

1. 禁止用户选中

user-select: none;

2. 选中文本的属性设置

body p::selection{
    background: orangered;
    color: #fff;
}

3. 过渡

transition
单个属性：

1. transition-property：要过渡的属性名称（如width、height）
2. transition-duration：过渡效果持续时间
3. transition-delay：延迟过渡时间（可不写）
4. transition-timing-function: 过渡效果运行曲线
   • linear: 匀速
   • ease：慢快慢
   • ease-in：匀加速
   • ease-out：匀减速

复合属性：
不给过渡属性，所有变化的属性都会参与过渡
不给运动曲线，默认匀速运动

transition: 1s; 过渡持续时间
transition: text-indent 1s; 要过渡的属性 过渡持续时间
transition: text-indent 1s 2s; 要过渡的属性 过渡持续时间 延时
transition: text-indent 1s 2s linear; 要过渡的属性 过渡持续时间 延时 运动曲线

4. 变换

transform

1. 旋转
   rotate(45deg)
   单位：

   • deg 角度
   • turn 圈

   transform-origin 旋转的基点
   值：
   n(px) left right top bottom center

2. 规模
   scale(n)
   n: 倍数
   n > 1 就是放大
   n < 1 就是缩小

5. 圆角

border-radius
值(圆角的半径)：

• px 盒子的半径就是圆, 小的圆角
• % 50%就是圆, 成为圆或者椭圆