任何方式声明一个盒子的大小/部分边框？

Question

有没有办法在css3中声明一个框的大小/部分边框？例如,一个350px的盒子,在第一个60px中只显示一个边框底部.我认为这可能非常有用.

例子:

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>

偏移,下划线现在左对齐.要使它居中,只需将伪元素的一半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使用以下组合之一将下划线与左侧,右侧或中心对齐(不知道当前):

• 左 :( 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

这是另一种依赖于线性渐变的解决方案,您可以轻松创建所需的各种线条.您还可以使用多个背景来拥有多条线(例如,每侧):

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