【css】总结css常用小技巧

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言：在我们前端开发时，对页面开发时常用但是又不容易记住的使用总结，涉及以后超出显示...、多行超出、文字中划线、下划线等。

1.一行超出...

使用场景：小标题，介绍时候需要一行显示，然后超出部分用...替代

• text-overflow: ellipsis;隐藏超出范围的文本用...

white-space: nowrap;不换行显示
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;碰到长单词或者url地址换到下一行

2.多行超出...

-webkit-line-clamp：n;设置

• -webkit-line-clamp:n;用来限制在一个块元素显示的文本的行数。它需要组合其他的WebKit属性
• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow: ellipsis;隐藏超出范围的文本用...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.给元素后面区域添加模糊效果

backdrop-filter: blur(6px);

4.毛玻璃

body, main::before{
    background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 800px;
    height: 500px;
    line-height: 2;
    margin: auto;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
    overflow: hidden;
}
main::before{
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

5.设置10px，8px字体

浏览器支持的最小就是12像素，之后通过缩放来实现想要的字号：

font-size: 12px;
transform: scale(0.91,0.91) ;
11px = 11/12=0.9166666666666667
10px = 10/12=0.8333333333333333

6.画三角形

1.先设置边框宽高但为透明 想要哪个箭头朝向的，就设置那个方向反方向为有颜色的

width: 0;
height: 0;
border-top: 20px solid。transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;

7.下划线，中划线

• text-decoration: 用于设置或删除文本装饰。

text-decoration:line-through; //中划线
text-decoration: overline; //上划线
text-decoration: underline; //下划线

7.下划线，中划线

• text-decoration: 用于设置或删除文本装饰。

text-decoration:line-through; //中划线
text-decoration: overline; //上划线
text-decoration: underline; //下划线

8.完美解决图片变形问题

使用场景：上传头像，轮播图与展示得尺寸不一致，这些图片很容易出现被挤压得情况

• object-fit: over; 自动剪裁相当于 background-size 填充 5个属性 fill:填充，不保证保持原有的比例，内容拉伸填充整个内容容器 contain:包含，保持原尺寸比例，内容被缩放可能留白 cover: 覆盖，保原有比例，宽度/高度其中一个与盒子一致，部分内容可能被剪切 none: 无，保持原有尺寸比例，同时保持替换内容原始尺寸大小。 scale-down: 降低，类似依次设置none，contain, 最终呈现尺寸比较小的那个
• object-position:50%，50%； 相当于 background-position：50%，50% 四种写法： object-position: right top; object-position: left bottom; object-position: 250px 125px;

 width: 200px;
 height: 200px;
 object-fit: cover;