css 有没有办法声明框的大小/部分边框？

mrfwxfqh 于 2022-11-27 发布在其他

关注(0)|答案(6)|浏览(139)

有没有办法在CSS中声明一个框的大小/部分边框？例如，一个350px的框只在它的第一个60px中显示一个border-bottom。我认为这可能是非常有用的。
示例：
x1c 0d1x

css

来源：https://stackoverflow.com/questions/8835142/any-way-to-declare-a-size-partial-border-to-a-box

6条答案

按热度按时间

xzabzqsa1#

我用一个网格来构建绘制一些边框。
请参阅here。
编码：
第一个

赞(0）回复(0）举报 2022-11-27

s4n0splo2#

CSS不支持部分边框。您需要使用相邻的元素来模拟。

赞(0）回复(0）举报 2022-11-27

e7arh2l63#

我一直在研究你的解决方案，然后想到了这个。
我会感谢你的意见和想法。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test file</title>
  <style>
    #box {
      background-color: gray;
      position: relative;
      left: 10px;
      top: 10px;
      height: 180px;
      width: 380px;
    }
    
    #grad1 {
      position: absolute;
      left: -10px;
      top: -10px;
      height: 40px;
      width: 2px;
      background-image: linear-gradient(red, red);
    }
    
    #grad2 {
      position: absolute;
      left: -10px;
      top: -10px;
      height: 2px;
      width: 40px;
      background-image: linear-gradient(red, red);
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="grad1"></div>
    <div id="grad2"></div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2022-11-27

lvmkulzt4#

不完全是。但是很容易以一种优雅的降级方式实现这种效果，并且不需要多余的标记：
第一个

赞(0）回复(0）举报 2022-11-27

t30tvxxf5#

我知道，这个问题已经解决了，像素也被要求了。但是，我只是想分享一些东西...
使用display:table或display:inline-block可以很容易地实现部分带下划线的文本元素
（我只是不使用display:inline-block，因为，是的，你知道，尴尬的4px-差距）。

文本元素

第一个

居中，display:table使元素无法以text-align:center居中。

让我们使用margin:auto...
第一次
"嗯“"很好”“但不是"部分”
由于已经引入了bookcasey，伪元素是无价的。
第一个

偏移量，下划线现在是左对齐的。要使其居中，只需将伪元素width（50% / 2 = 25%）的一半向右推。

第一个
...正如davidmatas所评论的，使用margin:auto有时比手动计算margin偏移量更实用。
因此，我们可以使用以下组合之一将下划线左对齐、右对齐或居中对齐（无需知道当前的width）：

*向左：margin-right: auto（或保持关闭）
*中间：margin: auto
*右侧：margin-left: auto
完整示例

.underline {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.underline:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

.underline--left:after {
  margin-right: auto; /* ...or just leave it off */
}

.underline--center:after {
  margin-left: auto;
  margin-right: auto;
}

.underline--right:after {
  margin-left: auto
}

<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>

块级元素

这很容易被采用，这样我们就可以使用块级元素了。诀窍是将伪元素的高度设置为与其 * 真实的 * 元素相同的高度（简单地为height:100%）：
第一个

赞(0）回复(0）举报 2022-11-27

lpwwtiir6#

这里是另一个依赖于linear-gradient的解决方案，你可以轻松地创建任何你想要的线条。你也可以通过使用多个背景来创建多条线条（例如在每一边）：
第一个
下面是另一种语法，实现与上面相同的功能：
第一次

赞(0）回复(0）举报 2022-11-27

我来回答

css 有没有办法声明框的大小/部分边框？

6条答案

文本元素

块级元素

相关问题

热门标签

最新问答