gpt4 book ai didi

html - 框阴影和溢出 : scroll

转载 作者:行者123 更新时间:2023-11-28 07:06:31 25 4
gpt4 key购买 nike

我正在使用 3 个带有面板标题 col-md-4 的 Bootstrap 面板,在每个面板的底部我都有框阴影,面板的最大高度为 300 像素。面板内的文本比面板本身长。我想为此使用 overflow: scroll 但是当我使用 overflow: scroll 时,它“覆盖”了 box-shadow (其中,我明白为什么)。我已经搜索了一段时间这个看似简单的解决方案,但一无所获。

我已经排除了 box-shadow 样式和其他两个面板以保持其下方干净。

    [Fiddle][1]

.sub-content-panel {
height: 400px;
border-radius: 5px;
position: relative;
color: black;
}

<div class="col-md-4 text-border">
<a href="gallery.php">
<div class="panel panel-default sub-content-panel">
<div class="panel-heading sub-content-panel-heading">
<p><i class="fa fa-commenting-o"></i>About us</p>
</div>
<div class="panel-body">
<p>with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship, attention to detail and inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress.</p>
</div>
</div>
</a>
</div>

.sub-content-panel:before, .sub-content-panel:after{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.sub-content-panel:after{

-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}


[1]: https://jsfiddle.net/2jufan88/

最佳答案

尝试使用 overflow-y: auto;

body, html {
margin: 10px;
}
.panel.panel-default.sub-content-panel {
max-height: 400px;
border-radius: 5px;
position: relative;
color: black;
overflow-y: auto;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 text-border">
<a href="gallery.php">
<div class="panel panel-default sub-content-panel">
<div class="panel-heading sub-content-panel-heading">
<p><i class="fa fa-commenting-o"></i> About us</p>
</div>
<div class="panel-body">
<p>with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements,
and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship,
attention to detail and inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress with 35 years experience as a furniture designer and builder, and his
son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction
techniques and materials, experiencessible while work is in progress with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes
his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experiencessible while work is in progress with 35 years experience as a
furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis
contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship, attention to detail and
inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress.</p>
</div>
</div>
</a>
</div>

关于html - 框阴影和溢出 : scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32919497/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com