者 | zoyoy

责编 | 伍杏玲

出品 | CSDN博客

CSS单行/多行文本，超出隐藏并显示省略号

方法一：使用CSS属性

单行文本溢出显示省略号

width: 100px;
overflow: hidden;
text-overflow:ellipsis; //文本溢出显示省略号
white-space: nowrap; //文本不会换行

多行文本溢出显示省略号

width: 100px;
overflow: hidden;
text-overflow: ellipsis; //文本溢出显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

因为使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

• -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

• display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

• -webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

使用场景：多用于移动端页面，因为移动设备浏览器更多是基于 WebKit 内核，除了兼容性不好，实现截断的效果不错。

方法二：利用定位和伪类元素

<div class="text">适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。</text>

.text{
position: relative;
width:300px;
line-height: 20px;
max-height: 60px;
overflow: hidden;
}
.text::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
// 添加渐变背景 避免文字只显示一半,难看
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

方法三：运用第三方插件或者自己写JS脚本控制

• clamp.js

• jQuery.dotdotdot

CSS垂直水平居中

CSS垂直水平居中的各种解决方法汇总：

https://blog.csdn.net/weixin_40693643/article/details/104446577

使用:hover选择器的content属性

<img src="../img/pic2.png">

img:hover{
content: url('../img/pic1.png')
}

演示效果：

注意：右键或其他形式保存这张图片的时候，保存的是原来src对应的图片。

content属性一般用来与::before及::after伪元素配合使用，来插入生成内容。

user-select设置不能选中文本

user-select属性是css3新增的属性，用于设置用户是否能够选中文本。可用于除替换元素外的所有元素。

兼容性代码示例：

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;

:not选择器

选中不在此范围内的元素，例如：div:not(:last-child)，选中除最后一个div的所有div元素。

有时候在做列表时需要为每项添加下边框线，但最后一个项不需要边框线。

换行文本使用 box-decoration-break

你有没有遇到过如下情况：

<div class="box">
<span>啊！我被分成两半儿啦~~</span>
</div>

.box{
width:100px;
border: 1px solid #000;
}
.box>span{
border-radius: 20px;
background-color: red;
color:#fff;
}

解决这个问题可以使用box-decoration-break属性

它可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现

添加样式：

-webkit-box-decoration-break: clone;
box-decoration-break:clone;

效果图：

实际应用案列：渐变背景

<div class="box">
<span class="text">
颜色从左到右渐变效果是这样的哦哦哦哦哦~~~
</span>
</div>

.box{
width:200px;
}
.text {
background-image: linear-gradient(to right, blue, red 200px);
}

添加样式：

-webkit-box-decoration-break: clone;
box-decoration-break:clone;

CSS3 pointer-events阻止鼠标事件

pointer-events 更像是JavaScript，它能够：

• 阻止用户的点击动作产生任何效果

• 阻止缺省鼠标指针的显示

• 阻止CSS里的 hover 和 active 状态的变化触发事件

• 阻止JavaScript点击动作触发的事件

浏览器兼容性：

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持（IE11又支持，不过很好的一点是在ie中给a加disabled 点击事件自动无效。），Opera在SVG中支持。但是 该属性HTML中 不支持 。

Vue深度选择器

有时候需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。

此时只能通过>>>，穿透scoped。

有些Sass之类的预处理器无法正确解析 >>>。可以使用/deep/操作符 或::v-deep( >>> 的别名)

示例：

<style scoped>
外层 >>> 第三方组件类名 {
样式
}
/deep/ 第三方组件类名 {
样式
}
</style>

改变input光标颜色

<input type="text">

input{
caret-color:red;
}

改变input触发后边框颜色

<input type="text">

input{
outline-color: green;
}

CSS3 不规则投影filter:drop-shadow

<img class="img1" src="../img/pic5.png" alt="">
<img class="img2" src="../img/pic5.png" alt="">

.img1{
box-shadow: 4px 4px 4px red;
}
.img2{
filter: drop-shadow(4px 4px 4px red);
}

演示效果：

图片示例：

根据图片可以明显的看出box-shadow和filter: drop-shadow的区别：

box-shadow会忽视透明部分,而filter: drop-shadow不会

这类情况包括：

• 半透明图像、背景图像、或者 border-image；

• 元素设置了点状，虚线或半透明的边框，但没有背景（或者当 background-clip 不是 border-box时）；

• 对话气泡，它的小尾巴通常是用伪元素生成的；

• “切角效果”；

• 折角效果；

• 通过clip-path生成的形状。

有趣的 CSS3 mask属性

pic7.jpg

pic1.png

<div class="mask"></div>

.mask{
width: 300px;
height: 300px;
background-image: url(../img/pic7.jpg);
-webkit-mask-image: url(../img/pic1.png);
-webkit-mask-size: 150px 150px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
}

运行效果：

注意：

• mask-image的图片一定要是png图片才看得出效果，两张图片结合会取相交的区域显示

• mask和background差不多，同样拥有size、repeat、position等属性

• 除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的浏览器都支持该属性。

::selection选择器

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。

::selection只可以应用于少数的CSS属性：color, background, cursor,和outline

<p>选中高亮我就变了了了了~~~</p>

p::selection{
color: #fff;
background:red;
}

原文链接：

https://blog.csdn.net/weixin_40693643/article/details/104324438

声明：本文系CSND博主原创，版权归作者所有。

《原力计划【第二季】- 学习力挑战》

正式开始

即日起至 3月21日

千万流量支持原创作者

更有专属【勋章】等你来挑战

我们的日常生活中，各种各样的条纹图案随处可见，那么我们用CSS又该怎样实现呢？

方案

假设我们有一条基本的垂直线性变化，颜色由red过渡到green。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条纹背景</title>
  <style>
    .box{
      width: 300px;
      height: 300px;

      background: linear-gradient(red, blue);
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
</body>
</html>

我们可以让这两个颜色靠近点：

      background: linear-gradient(red 20%, blue 80%);

这句话的意思是，当前容器的20%的区域被填充成red，而从80%起（也就是从从底部起的20%）被填充成blue，而中间的60%，则是线性渐变区域。

那么当我们把这两个颜色之间的线性简便区域变为零时，则有如下效果：

background: linear-gradient(red 50%, blue 50%);

由上图我们可以看见，已经没有任何的渐变效果，只有两块实色，从实际上看，我们创建了两条水平条纹。

我们可以通过background-size来调整尺寸：

  <style>
    .box{
      width: 300px;
      height: 300px;
      border: 2px dashed black;

      background: linear-gradient(red 50%, blue 50%) no-repeat;
      background-size: 100% 30px;
    }
  </style>

上图中，我们把每条条纹的实际尺寸调整到到了15px，我们也可以同相同的方法来创建不等宽的条纹。

background: linear-gradient(red 20%, blue 20%) no-repeat;

这里有一个语法糖点，在设置第二个参数的时候可以设置成0，意思就是浏览器在解析时会把第二个色标的位置调整为前一个色标的位置。

background: linear-gradient(red 20%, blue 0) no-repeat;

这个效果跟之前的是一样的。

我们也可以创建多个多彩的条纹。

      background: linear-gradient(red 33.33%, blue 0, blue 66.66%, yellowgreen 0) no-repeat;

垂直条纹

颜色的垂直线性过度是默认的，所以水平条纹是最容易创建的，那么当我们需要垂直的条纹时又该怎么办呢？其实很简单，只要如下即可：

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
 line-height:150px;
 text-align:center;
}
.redbox{
 display:inline-block;
 width:30px;
 height:30px;
 background:#c00;
}

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
 text-align:center;
}
.redbox{
 width:30px;
 height:30px;
 background:#c00;
 display:inline-block;
 vertical-align:middle;
}
.greenbox{
 width:30px;
 height:60px;
 background:#0c0;
 display:inline-block;
 vertical-align:middle;
}
.bluebox{
 width:30px;
 height:40px;
 background:#00f;
 display:inline-block;
 vertical-align:middle;
}

.greenbox{
 width:30px;
 height:100%;
 background:#0c0;
 display:inline-block;
 vertical-align:middle;
}

.div0::before{
 content:'';
 width:0;
 height:100%;
 display:inline-block;
 position:relative;
 vertical-align:middle;
 background:#f00;
}

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
}
.redbox{
 position:relative； 
 width:30px;
 height:30px;
 background:#c00;
 float:left;
 top:calc(50% - 15px);
 margin-left:calc(50% - 45px);
}
.greenbox{
 position:relative；
 width:30px;
 height:80px;
 background:#0c0;
 float:left;
 top:calc(50% - 40px);
}
.bluebox{
 position:relative； 
 width:30px;
 height:40px;
 background:#00f;
 float:left;
 top:calc(50% - 20px);
}

<table>
 <tr>
 <td>
 <div>表格垂直居中</div>
 </td>
 </tr>
</table>
<div class="like-table">
 <div>假的表格垂直居中</div>
</div>

.like-table{
 display:table-cell;
}
td,
.like-table{
 width:150px;
 height:100px;
 border:1px solid #000;
 vertical-align: middle;
}
td div,
.like-table div{
 width:100px;
 height:50px;
 margin:0 auto;
 color:#fff;
 font-size:12px;
 line-height: 50px;
 text-align: center;
 background:#c00;
}
.like-table div{
 background:#069;
}

.use-transform{
 width:200px;
 height:200px;
 border:1px solid #000;
}
.use-transform div{
 position: relative;
 width:100px;
 height:50px;
 top:50%;
 transform:translateY(-50%);
 background:#095;
}

.use-absolute{
 position: relative;
 width:200px;
 height:150px;
 border:1px solid #000;
}
.use-absolute div{
 position: absolute;
 width:100px;
 height:50px;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 background:#f60;
}

.use-flexbox{
 display:flex;
 align-items:center;
 justify-content:center;
 width:200px;
 height:150px;
 border:1px solid #000;
}
.use-flexbox div{
 width:100px;
 height:50px;
 background:#099;
}