CSS3补充

秒速五厘米 2023-03-04 06:39 38阅读 0赞

# 浏览器前缀 #

<table> 
 <thead> 
  <tr> 
   <th>浏览器前缀</th> 
   <th>浏览器</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-webkit-</td> 
   <td>Google Chrome, Safari, Android Browser</td> 
  </tr> 
  <tr> 
   <td>-moz-</td> 
   <td>Firefox</td> 
  </tr> 
  <tr> 
   <td>-o-</td> 
   <td>Opera</td> 
  </tr> 
  <tr> 
   <td>-ms-</td> 
   <td>Internet Explorer, Edge</td> 
  </tr> 
  <tr> 
   <td>-khtml-</td> 
   <td>Konqueror</td> 
  </tr> 
 </tbody> 
</table>

# 背景渐变 #

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

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