CSS3补充

浏览器前缀

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

背景渐变

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

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;
    }