有什么方法可以声明框的大小/局部边界？

101

在CSS中为框声明大小/部分边框的任何方法？例如，带有的框350px仅在其开头显示边框底60px。我认为这可能非常有用。

例子：

在此处输入图片说明 在此处输入图片说明

css  border 
— 大卫
source

Answers:

152

并不是的。但是，通过以适当的方式降级并且不需要多余的标记的方式来实现效果非常容易：

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>
展开摘要

— 书柜
source
3
没有+1就像被标记为正确答案一样。但是我+1了你！对于我的问题，这是一个完美的解决方案。谢谢！编辑我想你可能已经被其他人+1和-1了。那好吧。非常感谢您的回答，这很重要，对;-)
— CWSpear 2012年
7
像他的第二个例子一样，如何使它处于中心？
— 卡梅隆·马丁
当父元素是宽度可变的内联块元素时，我应该添加。显然，当它是固定宽度时，这很容易。
— 卡梅隆·马丁
4
没关系，我得到了想要的效果-dabblet.com/gist/e5a78f2d4bf50b6be4d3。真遗憾，::outside而且::inside伪元素还不可用，我讨厌仅为了样式而添加标记，但是我认为没有其他方法。
— 卡梅隆·马丁
这可行！来与使用它，你不能用content在:after作为内嵌样式或JSS，但它使用的风格部件工作正常。
— 拉斐尔·皮内尔
23

我知道，这已经解决，需要像素。但是，我只想分享一些东西...

带有下划线的文本元素可以通过使用display:table或轻松实现display:inline-block

（我只是不使用，display:inline-block因为，是的，尴尬的4px间隙）。

文字元素

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
展开摘要

居中，display:table使元素无法居中text-align:center。
让我们来解决margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
展开摘要

好吧，那很好，但不是部分的。
正如书柜已经介绍的那样，伪元素值得金。

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
展开摘要

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

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  margin-left: 25%;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
展开摘要

...如davidmatas所评论，使用margin:auto有时比margin手动计算-offset更实用。

因此，我们可以width使用以下组合之一将下划线对齐到左，右或中心（不知道current ）：

  • 左：（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%）：

div {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
div:after {
  border-bottom: 3px solid #666;
  content: '';
  display: block;
  height: 100%;
  width: 60px;
}
<div></div>
展开摘要

— 伊卡特
source
2
好答案。对于:after我来说，我更喜欢一种margin: 0 auto方法，margin-left: 25%因为它可以在您声明的任何宽度下工作，而无需进行数学运算。
— davidmatas
1
@davidmatas好点！我只是使用数学方法来阐明如何手动定位。通过此示例，任何人都可以理解如何将其左/中/右对齐。无论如何，我都会添加auto- 简化器 :)
— yckart '16
15

这是另一个解决方案，linear-gradient您可以在其中轻松创建所需的任何种类的线。通过使用多个背景，您还可以有多行（例如，在每一侧）：

显示代码段

这是与上述相同的另一种语法：

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(#000, #000) top /40% 3px no-repeat, 
   #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(red,red) bottom/ 60% 2px no-repeat, 
    #ccc;
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(red , red)bottom left/ 60% 2px,
   linear-gradient(blue, blue) 60% 0 / 40% 2px,
   linear-gradient(brown, brown) left/ 3px 30%,
   linear-gradient(orange, orange) right / 3px 40%,
   #ccc;
  background-repeat:no-repeat;
}
<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>
展开摘要

— Temani Afif
source
1
哇...我已经花了好几个小时来寻找一种方法来只显示“暗示”框的左上角和右上角。：before和：after太有限，它弄乱了对象的位置。这是一个绝妙的解决方案！
— Wouter
一些背景信息，说明为什么以及如何工作：webfx.com/blog/web-design/background-css-shorthand
— Wouter
2

我使用网格构建了一些边框。

看这里。

码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>
— 网站
source
@ SverriM.Olsen，因为该人编辑了代码，因此评论已过时
— Sagar V
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.