三、text - shadow 文本阴影¶
TIP
-
text - shadow 用来为文字添加阴，如果要给文字添加多个阴影，多个阴影之间用
,（逗号）隔开 -
当阴影个数
> 1时，阴影应用的顺序为从前到后，第一个指定的阴影在最顶部显示。
语法：
/*
x偏移和Y偏移，值可以为正负整数
模糊半径 为0或大于0的整数
*/
text - shadow: x偏移 Y偏移 模糊半径 颜色;
<style>
.box {
width: 100px;
height: 100px;
margin: 50px auto;
font-size: 100px;
/* 红色阴影 蓝色阴影 */
text-shadow: 0px 0px 10px rgb(251, 9, 9), 50px 10px 10px blue;
}
</style>
<body>
<div class="box">我</div>
</body>
![[Pasted image 20260301113332.png]]
四、文本溢出显示省略号¶
TIP
单行文本和多行文本溢出隐藏并显示省略号 …在实际项目开发中经常使用
1、单行文本溢出显示省略号¶
/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;
<style>
p {
width: 200px;
height: 50px;
border: 1px solid #ddd;
line-height: 50px;
/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;
}
</style>
<body>
<p style="color:red;">当文字的内容超容器的宽度时，会显示3个省略号
</body>
</html>
![[Pasted image 20260301113410.png]]
2、多行文本溢出显示省略号¶
<style>
p {
width: 200px;
height: 100px;
border: 1px solid #ddd;
line-height: 50px;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分显示省略号 */
text-overflow: ellipsis;
/* 对象做为弹性盒子模型显示 */
display: -webkit-box;
/* 块容器 中的内容限制为指定的行数。 */
-webkit-line-clamp: 2;
/* 弹性盒子对象的子元素排列方式为竖排 */
-webkit-box-orient: vertical;
}
</style>
<body>
<p>当文字的内容超容器的宽度时，会显示3个省略号当文字的内容超容器的宽度时，</p>
</body>
![[Pasted image 20260301113501.png]]
四、文本溢出显示省略号¶
TIP
单行文本和多行文本溢出隐藏并显示省略号 …在实际项目开发中经常使用
1、单行文本溢出显示省略号¶
/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;
<style>
p {
width: 200px;
height: 50px;
border: 1px solid #ddd;
line-height: 50px;
/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;
}
</style>
<body>
<p style="color:red;">当文字的内容超容器的宽度时，会显示3个省略号
</body>
</html>
**注意事项：
只有当元素的高 = line-height 大小 × -webkit-line-clamp（指定行数）时，才能显示出正确的效果。
五、opacity 设置元素不透明度¶
TIP¶
opacity 属性指定了一个元素的 不透明度
| opacity 属性值 | 描述 |
|---|---|
| 0 | 元素完全透明（即元素不可见） |
| 值在 0.0 - 1.0 之间 | 元素半透明（元素后面的背景可见），值越大，元素透明度越低 |
| 1 | 即元素完全不透明（即元素后面的背景不可见） |
注：¶
-
opacity 的值是一个 0.0 到 1.0 范围内的数字值。值如果大于 1，相当于 1；值小于 0，则相当于 0。
-
opacity 设置透明度时，其里面的子元素和内容也会被透明掉。所以也可以用
opacity: 0;来隐藏一个元素，及其里面的子元素一起隐藏掉。 -
opacity 的属性值不为 1 时，元素会创建自己的层叠上下文
代码示例：¶
<style>
.item {
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin: 10px 10px;
}
.item1 {
/* 不透明度 */
opacity: 0.8;
}
.item2 {
/* 不透明度 */
opacity: 0.5;
}
.item3 {
/* 不透明度 */
opacity: 0.1;
}
</style>
<body>
<div class="item item1">.item1</div>
<div class="item item2">.item2</div>
<div class="item item3">.item3</div>
</body>
![[Pasted image 20260301113542.png]] opacity 的属性值不为 1 时，元素会创建自已的层叠上下文
<style>
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: skyblue;
/*
opacity的值不为1时，会创建层叠上下文
即opacity:0.7时，.box1会在.box2的上面显示
*/
opacity: 0.7;
}
.box2 {
background-color: pink;
margin-top: -50px;
margin-left: 30px;
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
| .box1 未设置不透明度时或不透明度为 1 时 | .box1 的不透明度 opacity: 0.7 时 |
|---|---|
| ![[Pasted image 20260301113859.png]] | ![[Pasted image 20260301113904.png]] |
**对比学习表格
| 属性 | 是否在 DOM 树中 | 是否在渲染树中 | 视觉效果 | 对布局的影响 |
|---|---|---|---|---|
visibility: hidden |
✅ 在 | ✅ 在 | 元素不可见，但其内容和结构被保留为完全透明。 | 占据原有空间，会影响周围元素的布局。 |
display: none |
✅ 在 | ❌ 不在 | 元素及其所有后代完全从渲染流程中移除，如同不存在。 | 不占据任何空间，周围元素会重新排列。 |
background-color: rgba(0,0,0,0.1) |
✅ 在 | ✅ 在 | 仅元素的背景颜色具有透明度，元素的内容（文字、子元素）完全不透明。 | 正常占据空间，正常布局。 |
opacity: 0 |
✅ 在 | ✅ 在 | 将整个元素（包括其所有内容、子元素）作为一个整体设置为完全透明。 | 仍然占据原有空间，正常参与布局。 |
overflow: hidden |
✅ 在 | ✅ 在 | 将子元素超出容器范围的部分进行裁剪隐藏，容器本身可见。 | 正常占据空间，但内部内容的溢出部分不影响外部布局。 |
**注（黄色背景区域）
-
只有
display: none会被移出渲染树，其他所有属性下的元素都同时存在于 DOM 树和渲染树中。 -
visibility: hidden和opacity: 0的主要区别在于：前者仅自身透明但可独立控制子元素显隐，后者是连同所有内容作为一个整体透明。 -
background-color的透明度是样式效果，不影响元素的“存在性”。 -
overflow: hidden是一种对内部内容的裁剪规则，元素本身完全正常参与布局。
六、object-fit 图片裁剪¶
TIP¶
-
object-fit属性指定<img>、<video>等可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 -
可替换元素，点击查看完整官方详细内容 👇
-
object-fit通过以下属性值，来切换被替换元素的内容对象在元素框内的对齐方式，有点类似于background-size。 -
但是
object-fit在对齐时，是在元素框中间向两边的方式来填充。 -
而
background-size默认是从左上角向右和下来填充的，如果要设置以中间向两边，需要设置background-position: center;
**object-fit 属性值表格
| 属性值 | 描述 |
|---|---|
contain |
被替换的内容将被缩放，保持元素的宽高比，全部填充在内容框内。 |
cover |
被替换的内容将被缩放，保持元素的宽高比，填满整个内容框。 |
fill |
被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形。 |
none |
被替换的内容将保持其原有的尺寸。 |
scale-down |
内容的尺寸与 none或 contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
<style>
img {
width: 250px;
height: 200px;
border: 2px solid blue;
}
.contain {
/* object-contain 保持宽高比 填充在内容框中 */
object-fit: contain;
}
.cover {
/* cover 保持宽高比，正好填充满整个内容框 */
object-fit: cover;
}
.fill {
/* fill 被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形 */
object-fit: fill;
}
.none {
/* none 被替换的内容将保持其原有的尺寸 */
object-fit: none;
}
.scale-down {
/* scale-down 表示被替换内容尺寸为 none和 contain中最小的那一个 */
object-fit: scale-down;
}
</style>
<body>
<img src="images/hua1.jpg" alt="" class="contain" />
<img src="images/hua1.jpg" alt="" class="cover" />
<img src="images/hua1.jpg" alt="" class="fill" />
<img src="images/hua1.jpg" alt="" class="none" />
<img src="images/fish.png" alt="" class="scale-down" />
<img src="images/fish.png" alt="" class="contain" />
</body>
![[Pasted image 20260301114037.png]]
1、案例应用：防止图片拉伸或挤压¶
-
TIP
-
我们预想的是用户按 1:1 的大小来上传头像图片，但实际用户上传的头像比例是五花八门，就会造成图片被拉伸或挤压变形。
-
我们可以添加
object - fit: cover;来等比例裁剪图片尺寸，这样图片就不会被拉伸或压缩，不过会有一部分图片被裁剪掉。
-
-
比如
- 设计师认为用户会按要求上传 1:1（宽:高）的用户头像 ![[Pasted image 20260301114159.png]] 但实际，用户上传的头像不是 1:1 ，各种比例都有，比如：3：2 ![[Pasted image 20260301114252.png]]
最后出现的效果反差如下图：
| 设计师设计的效果（图片尺寸 1：1） | 实际用户上传的图片效果（尺寸 3：2） | 通过 object-fit:cover 处理后 用户上传图片的效果 |
|---|---|---|
| ![[Pasted image 20260301114417.png]] | ![[Pasted image 20260301114424.png]] | ![[Pasted image 20260301114433.png]] |
<style>
.box {
width: 200px;
height: 200px;
border-radius: 50%;
/* 超出部分隐藏 */
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
/* 保持图片原有尺寸来裁剪 */
object-fit: cover;
}
</style>
<body>
<div class="box">
<img src="images/tx.png" alt="" />
</div>
</body>
2、浏览器兼容前缀¶
.element {
-webkit-object-fit: cover; /* 兼容旧版 WebKit 浏览器 */
object-fit: cover; /* 标准写法 */
}