css 任何方式来声明一个框的大小/部分边框?



css3 (4)

任何方式来声明一个大小/部分边框到css3中的一个盒子? 例如一个350px的盒子,只显示60px的第一个边框。 我认为这可能非常有用。

例子:

https://ffff65535.com


CSS不支持局部边框。 你需要使用相邻的元素来模拟这个。


不是真的。 但是,以一种可以优雅地降解并且不需要多余标记的方式实现效果是非常容易的:

div {
  width:350px; 
  height:100px; 
  background:lightgray; 
  position:relative;
 }
div:after {
  content:''; 
  width:60px; 
  height:4px; 
  background:gray; 
  position:absolute; 
  bottom:-4px;
}

Demo


我知道,这已经解决了,请求了像素。 不过,我只是想分享一些东西......

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

(我只是不使用display:inline-block因为,是的,你知道,4pgap的尴尬)。

文本元素

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>

很好,但它不是部分
由于已经推出的bookcasey ,伪元素值得黄金。

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>

偏移量 ,下划线现在左对齐。 为了居中,只需将伪元素的一半width50% / 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 davidmatas更实用。

因此,我们可以使用以下组合之一将下划线与左侧,右侧或中心对齐(不知道当前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>


这是另一种依赖于线性渐变的解决方案,您可以轻松创建所需的所有线。 您也可以使用多个背景(例如,每边都有多行):

.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">
  Box
</div>
<div class="box2">
  Box
</div>
<div class="box3">
  Box
</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 no-repeat,
  linear-gradient(blue, blue) 60% 0 / 40% 2px no-repeat,
  linear-gradient(brown, brown) left/ 3px 30% no-repeat,
  linear-gradient(orange, orange) right / 3px 40% no-repeat
  #ccc
}
<div class="box1">
  Box
</div>
<div class="box2">
  Box
</div>
<div class="box3">
  Box
</div>





css3