浏览器前缀

背景渐变

兼容性问题很严重，我们这里之讲解线性渐变
语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

文本溢出

单行文本溢出隐藏，显示省略号

p{white-space:nowrap;/*强制文本一行显示*/overflow:hidden;/*超出元素默认内容隐藏*/text-overflow:ellipsis;/*使用省略号代表有内容未显示*/}

多行文本溢出隐藏，显示省略号

-webkit是针对webkit内核的浏览器

p{-webkit-line-clamp:2;/*用将属性来限定块元素内文本显示的行数*/display: -webkit-box;/*将对象作为弹性的伸缩盒子来显示*/-wbkie-box-orient: vertical;/*设置伸缩盒子对象内子对象的排列方式*/overflow: hidden;/*超出元素默认内容隐藏*/text-overflow:ellipsis;/*使用省略号代表有内容未显示*/}

-wbkie-box-orient的参数：

• horizontal
  盒子水平布局其内容。
• vertical
  盒子垂直布局其内容。
• inline-axis (HTML)
  盒子沿内联轴展示其子元素。
• block-axis (HTML)
  盒子沿块轴展示其子元素。

通用多行文本溢出隐藏，显示省略号

p {height: 30px;line-height: 2em;overflow: hidden;border: 1px solid red;position:relative;}p:after{content:\"...\";position: absolute;right:0;padding: 0 10px ;right: 0;bottom: 0;background-color: white;}