css 常用样式合集

1.一行显示

overflow: hidden; //超出隐藏
text-overflow: ellipsis; //显示省略号
white-space: nowrap; //强制不换行

2.多行显示超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //显示文字的行数
-webkit-box-orient: vertical;


// 最后一行显示半行 ，测试可用
.content{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  position: relative;
  }
.content:after{
 content: "...";
 position: absolute;
 bottom: 0;
 right: 0;
 padding-right: 352px;
 padding-left: 4px;
 background: linear-gradient(to right, transparent, #fff 0%);
}

3.设置滚动条样式

::-webkit-scrollbar {
  width: 10px;
  height:5px;
}
::-webkit-scrollbar-thumb { //滑块部分
  border-radius: 5px;
  background-color: rgb(175, 74, 240);
}
::-webkit-scrollbar-track { //轨道部分
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 5px;
}

4.水平垂直居中

• 定位

.parent { position: relative; } 
.son{
       position: absolute;
       border: 1px solid #ccc;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
    }

• table

.parent { 
    display: table; 
    text-align: center;
    } 
.son { 
    display: table-cell; 
    vertical-align: middle;
    }

• Flex 弹性盒子

// 方法一
.parent { 
        display: flex;
        justify-content: center;
        align-items: center; 
    }
 // 方法二
.parent { 
        display: flex;
        .son {
            margin: auto;
        }
   }

• grid栅格布局

.parent { 
       	display: grid;
	align-content: center;
	justify-content: center; 
    }

5.box-shadow参数说明

box-shadow：h-shadow v-shadow blur spread color inset

• h-shadow 必需。水平阴影的位置。允许负值
• v-shadow 必需。垂直阴影的位置。允许负值
• blur 可选。模糊距离
• spread 可选。阴影的尺寸
• color 可选。阴影的颜色
• inset 可选。将外部阴影 (outset) 改为内部阴影

    box-shadow: 1px 1px 5px 2px #888888;

6.css 绘制三角形

width: 0px;
height: 0px;
border-top: 50px solid #f99;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

6.滤镜置灰

html {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
}

7.隐藏滚动条及hover显示

&::-webkit-scrollbar { width: 0 !important }  //chrome 和Safari
&{ -ms-overflow-style: none; } //IE 10+
&{ overflow: -moz-scrollbars-none; } //Firefox
&:hover{&::-webkit-scrollbar {width: 5px !important;}} // hover显示滚动条

8.'\n'不换行的问题

// 返回的文本中`\n`不换行
const text = :'1、XX系统发生故障，引致核心业务无法持续运作，预计在1小时内无法恢复；\n2、网络系统故障造成70%以上分支机构无法正常处理，预计1小时内无法恢复； \n3、其他；'
// 给文本容器加上 
.className { white-space: pre;} 或者 .className { white-space: pre-wrap;}

9.html文件中纯数字或纯英文不会自动换行

// 加入下列样式代码
word-wrap:break-word;
word-break:break-all;

10.图片在容器中等比缩放/裁切

// html
<div class="container">
    <img src="path/to/image.jpg" alt="Responsive Image">
</div>
// css
.container {
    width: 300px; /* 或者任何你想要的宽度 */
    height: 200px; /* 或者任何你想要的高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
}
.container img {
    width: 100%; /* 图片宽度为容器宽度 */
    height: 100%; /* 图片高度为容器高度 */
    object-fit: contain; /* 图片等比缩放，可能会有空白边框 */
    /* 如果不需要空白边框，可以使用 cover，但这可能会导致图片裁剪 */
    /* object-fit: cover; */
}

object-fit 属性由下列的值中的单独一个关键字来指定：

参数	取值
fill	默认值，被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应
contain	被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加黑边
cover	被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应
none	被替换的内容大小保持其宽高比，而且被替换的内容尺寸不会被改变。如果容器尺寸小于图片内容尺寸，只显示容器大小范围的部分；反之，图片会全部显示，但会有留白
scale-down	内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样

11.文本添加渐变色 | 阴影

background: linear-gradient(180deg, #ffffff 27%, #00a2ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
// 阴影
filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.5));