老师有个问题

来源:2-8 编程练习

激情的樱木花道

2021-08-05 21:10:45

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 380px;
margin: 20px auto;
/* border: 1px solid #000; */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
margin: 15px 8px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<h3>岳阳楼记</h3>
<p>
予观夫巴陵胜状,在洞庭一湖。衔远山,吞长江,浩浩汤汤,横无际涯,朝晖夕阴,
气象万千,此则岳阳楼之大观也,前人之述备矣。
</p>
</div>
</body>
</html>

给box加

box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);

p的下外边距就没效果了,这是怎么回事

写回答

1回答

好帮手慕星星

2021-08-06

同学你好,不是box-shadow的问题,是浏览器解析的问题。当box不设置边框也不设置box-shadow的时候,添加背景色,可以看到,也不包括p下边距

http://img.mukewang.com/climg/610c98c709201ebe08680442.jpg

给box加上overflow:hidden;属性可以解决问题

http://img.mukewang.com/climg/610c98f409d47aa109150479.jpg

当然添加border属性也可以解决的,所以同学开始用border效果没问题,用box-shadow属性的时候看到效果不一样了。和之前课程中扩展的margon传递问题类似,可以回顾下:

https://class.imooc.com/lesson/1613#mid=45568

https://class.imooc.com/lesson/1614#mid=45570

另外文字两行显示样式没问题,祝学习愉快!

0

0 学习 · 15276 问题

查看课程