老师有个问题
来源: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下边距
给box加上overflow:hidden;属性可以解决问题
当然添加border属性也可以解决的,所以同学开始用border效果没问题,用box-shadow属性的时候看到效果不一样了。和之前课程中扩展的margon传递问题类似,可以回顾下:
https://class.imooc.com/lesson/1613#mid=45568
https://class.imooc.com/lesson/1614#mid=45570
另外文字两行显示样式没问题,祝学习愉快!
相似问题