有沒有辦法在CSS3中為框聲明尺寸/部分邊框？例如，一個350像素的框在其前60像素的開頭僅顯示邊框底部。我認為這可能非常有用。
3 回答
POPMUISE
TA貢獻1765條經驗 獲得超5個贊
并不是的。但是，通過以適當的方式降級并且不需要多余的標記的方式來實現效果非常容易：
div {
width:350px;
height:100px;
background:lightgray;
position:relative;
}
div:after {
content:'';
width:60px;
height:4px;
background:gray;
position:absolute;
bottom:-4px;
}
倚天杖
TA貢獻1828條經驗 獲得超3個贊
我知道，這已經解決，需要像素。但是，我只想分享一些東西...
帶有下劃線的文本元素可以通過使用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>
守著一只汪
TA貢獻1872條經驗 獲得超4個贊
這是另一個解決方案，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>
- 3 回答
- 0 關注
- 614 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消