本文发表于 283 天前，其中的信息可能已经事过境迁
文章摘要 FakeGPT
加载中...|
单行或多行溢出隐藏
html
<style>
/* 单行省略 */
.box {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行省略 */
.box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 超过两行 */
overflow: hidden;
}
</style>
<div class="box">11111</div>宽度适应内容 block
示例：
宽度适应内容
在这里，块盒宽度将会适应内容
代码：
html
<style>
div {
width: fit-content;
background-color: red;
color: white;
}
</style>
<div>宽度适应内容</div>文字与背景颜色混合
颜色会根据背景颜色与文字颜色进行对比，对比的结果作为新的颜色。
文字与背景颜色混合
html
<style>
div {
mix-blend-mode: difference; /*difference 为差值算法*/
background-color: #4d64f0;
color: black;
}
</style>
<div>文字与背景颜色混合</div>将元素样式还原为浏览器默认样式/重置样式
revert表示还原默认样式，包括字体、颜色、背景、边框等，在需要重置样式时，可以尝试使用这个。
| 参数 | 作用 |
|---|---|
| revert | 还原浏览器默认样式，忽略自定义样式。 |
| initial | 将属性重置为 CSS 规范中的默认初始值（不依赖于任何外部样式表或继承） |
自定义背景颜色形状
背景颜色形状通过clip-path来设置。
html
<style>
div {
width: 100px;
height: 100px;
clip-path: circle(50%); /*代表画出一个圆形*/
}
</style>
<div></div>推荐使用 clip-path生成器生成
锁定元素宽高比
aspect-ratio属性可以锁定元素的宽高比，在某些情况下，例如视频，图片等元素，可以设置宽高比，让元素保持固定比例。
html
<style>
img {
aspect-ratio: 16/9;
max-width: 400px;
overflow: hidden;
}
</style>
<img src="https://ddlyt-top.oss-cn-beijing.aliyuncs.com/img/02.jpg" alt="紧箍" />高斯模糊
html
<style>
div {
filter: blur(1px);
}
img {
aspect-ratio: 16/9;
max-width: 400px;
overflow: hidden;
}
</style>
<div>
<img src="https://ddlyt-top.oss-cn-beijing.aliyuncs.com/img/02.jpg" alt="紧箍" />
</div>修改输入框光标颜色
html
<style>
input {
caret-color: red;
}
</style>
<input type="text" />快速选中同一个父级下的多个子元素
html
<style>
.box :is(h1, h2, h3, h4, h5) {
/*权重更高*/
color: red;
}
.box :where(h1, h2, h3, h4, h5) {
color: red;
}
</style>
<div class="box">
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<p>6</p>
<span>7</span>
</div>元素缩放问题
当使用transform进行缩放时，会经常遇见一个问题，虽然元素看着是被缩小了，但是，元素所占空间并没有改变。解决办法就是使用 zoom 来缩放。
css
@media screen and (max-width: 768px) {
/*transform: scale(0.5);*/
/*transform-origin: top left;*/
zoom: 0.5;
}伪元素 ::first-line
::first-line 可以用来选中块级元素中第一行可见文本，通常用于美化段落的首行样式。
第一行文字会变红
第二行文字不会
html
<p class="first-line-p">
第一行文字会变红<br />
第二行文字不会
</p>解决 flex:1 时，子元素内容超出父元素问题
有时，给父元素设置 flex:1 后，子元素宽度会超出父元素，导致父元素也跟着宽度变大
原因：
在 Flex 中，子元素默认是不会自动收缩的。
- 浏览器默认行为是：
css
* {
min-width: auto;
}- 这会导致：即使父容器很窄，子元素也不会压缩自己内容，而是维持自身内容宽度。也就是 宁可撑破父容器，也不换行或压缩
解决：
父元素设置 min-width: 0 或 overflow: hidden
伪类 :empty
:empty 伪类选择器，用于匹配元素内容为空的元素。
html
<style>
.myImg:empty::before {
content: "图片已丢失";
color: red;
}
.box:empty::before {
content: "数据为空";
color: gray;
}
</style>
<img src="" alt="" class="myImg" />
<div class="box"></div> 评论 隐私政策