工作中的知识点记录-css篇border-image及border-image-slice属性实现背景图片可根据内容伸缩

border-image及border-image-slice属性实现背景图片可根据内容伸缩

应用场景：背景为图片，内容动态可变的按钮或其他盒子

html

<div class="flex-button">登录</div>
<div class="flex-button">人脸登录</div>

css

.flex-button{
    display: inline-block;        
    border-image: url('./webp.png');        
    border-image-slice: 12 fill;        
    border-width: 12px;        
    border-style: solid;        
    color:#fff;        
    padding: 10px 30px;   
 }

效果

filter改变图片颜色

知识点：彩色图片变色可以使用filter的hue-rotate（色相旋转）改变，hue-rotate对白色或黑色或任何灰度图片无效，可以使用drop-shadow加translate实现颜色改变。另外filter: grayscale(100%);可以致灰度实现悼念模式。
应用场景：UI给的icon图片hover时改变颜色。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
.filter-img{
	float: left;
}
.img-1:hover{
	filter: hue-rotate(160deg);
}
.img-wrap{
	width: 200px;
	height: 200px;
	overflow: hidden;
}
.img-2{
	width: 100%;
	height: 100%;
}
.img-wrap:hover>.img-2{
	transform: translateY(-300px);
	filter: drop-shadow(red 0 300px);
}

</style>
<body>
	<div class="filter-img">
		<p>彩色图片hover变色</p>
		<img src="./img-1.png" alt="" class="img-1">
	</div>
	<div class="filter-img">
		<p>白色或黑色或任何灰度图片hover变色</p>
		<div class="img-wrap">
			<img src="./img-2.png" alt="" class="img-2">
		</div>
	</div>

</body>
</html>

效果

滚动条样式修改

知识点：::-webkit-scrollbar滚动条整个区域，::-webkit-scrollbar-thumb滚动条可拖动的区域，::-webkit-scrollbar-track除去可拖动的背景区域

代码

::-webkit-scrollbar{    
    width: 5px;
}
::-webkit-scrollbar-thumb{    
    background-color: #2DFFFE;    
    background: url('./scroll.png') no-repeat;    
    background-size: 100% 100%;    
    border-radius: 0;
}
::-webkit-scrollbar-track{    
    background-color: rgba(0,159,255,.3);
}

效果

图片根据父级大小自适应宽高

代码

.img{            
    max-width: 100%;    
    max-height: 100%;
}

文本超出...(单行与多行)

单行

.text{
   overflow: hidden;
   white-space: nowrap;
   text-overflow:ellipsis;
}

多行

.content-title{
  height: 40px;
  line-height: 20px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

css禁止鼠标点击事件

代码
```
pointer-events: none; 
```

文字渐变效果

代码

.text{                
    background:linear-gradient(180deg,rgba(157,251,205,1) 0%, rgba(63,205,253,1) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

文字发光效果

代码

.text{        
    text-shadow:4px 0px 10px #228DFF,
    -4px 0px 10px #228DFF,
    0px 4px 10px #228DFF,
    0px -4px 10px #228DFF;
}

效果

flex布局，flex:1;占据剩余空间内容过长时会挤压兄弟元素空间，可以给flex:1;的元素加width:1px;或height:1px;解决这个问题。

效果

display: table-cell;实现分割线

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
.flex-wrap{
    width: 600px;
}
.split-line{
    display: table;
    white-space: nowrap;
    line-height: 20px;
}
.split-line::before{
    content: '';
    display: table-cell;
    border-top: 1px solid #ccc;
    width: 10%;
}
.split-line::after{
    content: '';
    display: table-cell; 
    border-top: 1px solid #ccc;
    width: 90%;
}
  </style>
</head>
<body>
    <div class="flex-wrap">
        <div class="split-line"> 分割线示例</div>
    </div>
</body>
</html>

效果

clip-path实现切角

知识点：clip-path可以裁切成多种形状，这个网站可以在线生成各种裁切形状www.html.cn/tool/css-cl…

代码

.clip-path{    
    display: inline-block;
    background:linear-gradient(90deg,rgba(112,255,186,1),rgba(0,255,204,1),rgba(51,133,255,1));
    clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 30% ,10% 0);
    color: #fff;
    padding: 4px 8px;
}

效果

display: contents;

知识点：元素本身不生成任何盒子，但其子元素和伪元素任然生成，正常展示。
应用场景：例如，当页面已经使用flex布局写好，因需求要加v-if判断套一层盒子，导致页面布局混乱，可以给这层盒子添加 display: contents;属性，页面就会正常显示