CSS给文本添加背景颜色等效果

1-给文本添加背景颜色

css 复制代码

 <h1>这是一段渐变色文字xxxxxxxxxxxxxxxxxxxxxxxx</h1>
    h1 {
  background: linear-gradient(to left, #f36, #ffcd3c, #1646e7, #2dd1d1, #f01d7f, #11100c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   user-select: none; 
}

运行效果：

2-不规则圆角

css 复制代码

  <div class="box1"></div>
.box1 {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: #ff4d6d;
  width: 40px;
  height: 40px;
  margin: 50px;
}

核心是通过border-radius设置的圆角，前四个值是控制的x轴上水平半径，后面四个值控制的是y轴上的垂直半径，可以在浏览器上修改这几个值直观看到效果。

运行效果：

3-允许穿透

我们给页面加上一个遮罩层，正在情况下我们点不到遮罩层下面的元素，pointer-events可以实现穿透

css 复制代码

       <div class="mask"></div>
       <div @click="ceshi">点击</div>

  const ceshi=()=>{
    console.log('遮罩层被穿透');
  }


.mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  /* 允许穿透 */
  pointer-events: none;   
     
}

运行效果：即使有遮罩层元素的点击事件依旧触发了，去掉pointer-events则不会触发

4-文字禁止选中

给需要禁止选中文本的盒子加上该属性即可

css 复制代码

   user-select: none;

5-文本超出变成点点点

css 复制代码

   <div class="eilips">
           文本超出隐藏变成点点点xxxxxxxx
   </div>
 .eilips{
    overflow: hidden;
    /* 主要是通过该属性来控制 */
    text-overflow: ellipsis;
   //禁止换行
    white-space: nowrap;
    width:220px;
    border: 1px solid;
  }

6-俩行超出隐藏

css 复制代码

 <div class="eilips2">
      文本超出隐藏变成点点点xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>

.eilips2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 220px;
  border: 1px solid;
}

7-给元素添加部分的背景色

css 复制代码

<p class="highlight inline">鼠标移上来，背景自动填满文字长度xxxxxxxxxxxxxxxxxxxxxxxx</p>
 .highlight {
  background: linear-gradient(#fde68b, #fde68b) no-repeat left 90% / 0 40%;
  transition: background-size .4s;
  width: fit-content;
  border: 1px solid;
}
.highlight:hover {
  background-size: 100% 40%;
}

核心是通过background-size属性来实现的，第一个参数是控制的x轴，100%代表为整个盒子添加，第二个参数是y轴，40% 为背景的高度

background-size: 50% 80%;可以看到宽度站了一半，高度快沾满了

8-clip-path

该属性用来定义元素的可见区域

css 复制代码

    <div class="clip"></div>
 .clip{
     width: 200px;
  height: 150px;
  background: #42b983;
  /* polygon(左上, 右上切角点, 右下, 左下) */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  }

核心是通过polygon函数来实现，这里解释下里面的参数：

第一参数 0 0：x=0（最左侧），y=0（最顶部）盒子的左上角(0,0) 点

第二参数 calc(100% - 20px) 0 ： x = 宽度 - 20px，y=0（最顶部）盒子顶部边缘，距离右边缘 20px 的位置

第三个参数 100% 20px ：x=100%（最右侧），y=20px（距离顶部 20px）盒子右侧边缘，距离上边缘 20px 的位置

第四个参数 100% 100% ：x=100%（最右侧），y=100%（最底部）盒子的右下角

第五个参数 0 100% ：x=0（最左侧），y=100%（最底部）盒子的左下角