在 CSS 中保持 border-top 和 border-bottom 之间的淡入淡出

发布于 2025-01-16 00:08:59 字数 1269 浏览 5 评论 0原文

我正在尝试使帖子内容淡入淡出，就像标题一样。参见图片。

但是，我无法设法将其放在顶部和底部边框之间。这是代码。

这是帖子消息容器。

.PostMessage{
max-height: 6em;
overflow:hidden;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}

这里是褪色。

.PostMessage::before{
position:absolute;
content: '';
background: linear-gradient(to right, transparent 93%, red 99%);
width: calc(100% - 61px);
max-width: 728px;
height: 97px;
pointer-events: none;
}

这是 HTML：

<div class="PostContainer">

        <div class="PostContainerMetadata">
            <p class="PostContainerMetadataID">Post id # <a href="">23</a></p>
            <p class="PostContainerMetadataInfo"> <a href="">Videogames</a> • Posted by <a href="">user</a> on xx-xx-xx</p>
        </div>

        <div class="PostTitle">
            <h2>Title of post</h2>
        </div>

        <div class="PostMessage"><pre><code>This is a short message.</code></pre></div>

    </div>

原文

I am trying to get a fade on the post content, just like the title. See image.

However, I can't manage to make it sit in between the top and bottom border.Here is the code.

This is the post Message container.

.PostMessage{
max-height: 6em;
overflow:hidden;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}

Here is the fading.

.PostMessage::before{
position:absolute;
content: '';
background: linear-gradient(to right, transparent 93%, red 99%);
width: calc(100% - 61px);
max-width: 728px;
height: 97px;
pointer-events: none;
}

Here is the html:

<div class="PostContainer">

        <div class="PostContainerMetadata">
            <p class="PostContainerMetadataID">Post id # <a href="">23</a></p>
            <p class="PostContainerMetadataInfo"> <a href="">Videogames</a> • Posted by <a href="">user</a> on xx-xx-xx</p>
        </div>

        <div class="PostTitle">
            <h2>Title of post</h2>
        </div>

        <div class="PostMessage"><pre><code>This is a short message.</code></pre></div>

    </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

囍孤女 2025-01-23 00:09:00

TL；博士。将固定高度替换为灵活高度。（参见代码片段）

如评论中所述，.PostMessage 具有灵活的高度，max-height 为 6em，而其 ::before 伪元素的静态高度为 97px，这使得 ::before 比元素本身更高。

您可以将 position:relative 添加到主 .PostMessage 元素，并使用 top: 0; 和 bottom: 0; 为其 ::before 伪元素，并删除它的 height 。

.PostMessage {
  max-height: 6em;
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px;
  position: relative;
}

.PostMessage::before {
  position: absolute;
  content: '';
  background: linear-gradient(to right, transparent 93%, red 99%);
  pointer-events: none;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="PostMessage">
  short message
</div>

<br />
<br />

<div class="PostMessage">
  longer message <br /> spanning over <br /> multiple lines <br /> here <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br />
</div>

TL;DR. Replace fixed height with a flexible one. (See code snippet)

As noted in the comment, .PostMessage has a flexible height with a max-height of 6em whereas its ::before pseudo-element has a static height of 97px, which makes the ::before taller than the element itself.

You can add position: relative to the main .PostMessage element, and use top: 0; and bottom: 0; for its ::before pseudo-elements, and remove height of it.

.PostMessage {
  max-height: 6em;
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px;
  position: relative;
}

.PostMessage::before {
  position: absolute;
  content: '';
  background: linear-gradient(to right, transparent 93%, red 99%);
  pointer-events: none;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="PostMessage">
  short message
</div>

<br />
<br />

<div class="PostMessage">
  longer message <br /> spanning over <br /> multiple lines <br /> here <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br />
</div>

回复收藏 0 原文

~没有更多了~