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

Question

有没有办法在CSS3中为框声明尺寸/部分边框？例如，一个350像素的框在其前60像素的开头仅显示边框底部。我认为这可能非常有用。

Answer 1

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

div {

  width:350px; 

  height:100px; 

  background:lightgray; 

  position:relative;

 }

div:after {

  content:''; 

  width:60px; 

  height:4px; 

  background:gray; 

  position:absolute; 

  bottom:-4px;

}

Answer 2

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

带有下划线的文本元素可以通过使用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>

Answer 3

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

.box1 {

  width: 200px;

  padding: 20px;

  margin: 10px auto;

  text-align: center;

  background: 

    linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat, 

    #ccc

}

.box2 {

  width: 200px;

  padding: 20px;

  margin: 10px auto;

  text-align: center;

  background: 

    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, 

    #ccc

}

.box3{

  width: 200px;

  padding: 20px;

  margin: 10px auto;

  text-align: center;

  background: 

    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,

    linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,

    linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,

    linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,

  #ccc

}

<div class="box1">

  Box1

</div>

<div class="box2">

  Box2

</div>

<div class="box3">

  Box3

</div>

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

.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>