项目实战问题记录—— CSS

文本溢出显示省略号

单行文本

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

多行文本

{
    
    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

自定义滚动条样式

  <div class="scroll-test" style="width:200px;height:300px;overflow:auto;background:#E3F0FC">
    <div style="height:500px"></div>
  </div>

/*滚动条整体样式*/
.scroll-test::-webkit-scrollbar {
    
    
   width: 6px;
   height: 6px;
   background:#333;
 }
 
/*滚动条里面的轨道*/
 .scroll-test::-webkit-scrollbar-track {
    
    
   border-radius: 0;
 }
 
 /*滚动条里面的小方块*/
 .scroll-test::-webkit-scrollbar-thumb {
    
    
   border-radius: 0;
   background:#666;
   transition: all .2s;
   border-radius:3px;
 }
 .scroll-test::-webkit-scrollbar-thumb:hover {
    
    
   background-color: #555;
 }

效果预览：
在这里插入图片描述

CSS:filter

filter 属性使CSS可以对图片进行各种各样的处理。例如：

drop-shadow 可用于实现改变图标颜色;
grayscale 做旧效果、纪念日时需要将全站变灰色；
blur 可用于实现背景图的模糊效果；

filter: none       
    | blur()         //模糊效果 px
    | brightness()   //调整明度  %
    | contrast()     //调整对比度 %
    | drop-shadow()  //设置阴影效果(h-shadow v-shadow blur spread color) 
    | grayscale()    //转为灰度图像 % 
    | hue-rotate()   //色相旋转 deg 类似
    | invert()       //反转 %
    | opacity()      //
    | saturate()
    | sepia()        //将图像转换为深褐色 %
    | url();

参考链接：https://www.jb51.net/css/645314.html

生成占位图

有时候在实现页面时，UI 还没有提供相关的图片。那么可以使用这个占位图工具。
使用公式：

https://via.placeholder.com/[width]x[height].format/backgroundColor/color?text=textContent

format 的位置还可以是在 backgroundColor 或者 color 后面，可选格式：GIF/JPG/JPEG/PNG
颜色的表示方式，大小写均可，三位/六位均可
http / https 均支持

使用示例：
http://via.placeholder.com/800x600?text=textContent
https://via.placeholder.com/800x600.jpg/DDD/FFF?text=textContent

参考链接：https://placeholder.com/

元素的各种位置

在这里插入图片描述

position:fixed 失效

当元素的祖先元素设置了非none值的 transform或 perspective ，该元素就会相对于这个祖先元素而不是视口进行定位。

参考链接：https://blog.csdn.net/Panda_m/article/details/78954235

鼠标属性 `pointer-event:none`

该配置表示取消元素的所有鼠标事件。
慎用！
设置pointer-event:none后，所有的鼠标事件都会失效，包括点击、悬浮等。
这意味着， cursor 的设置也会失效（因为cursor设置的是悬浮状态下的鼠标样式）