CSS：設置邊框寬度的一半

考慮以下幾點：CSS：設置邊框寬度的一半

<div class="box"> 
... 
</div> 

.box{ 
    width:500px; 
    border-bottom: 1px solid #ccc; 
}

它將把盒子的全寬的底部邊框（500像素）。但不是設置邊框底部的整個寬度，我想設置300像素，在盒底的中間，我應該怎麼做..

來源

2012-01-10 user1117313

可你把心''

在你的對話框的底部？然後，您可以根據需要設計它的樣式。 – 2012-01-10 18:05:30

實際上，填充是用來控制它的。 – noob 2012-01-10 18:10:53

@micha也將填充「盒子」內的內容 – 2012-01-10 18:13:56

你可以在箱子底部扔<hr>嗎？

<div class="box"> 
    ... 
    <hr> 
</div> 

.box{ 
    width:500px; 
} 

.box hr{ 
    width: 300px; 
    border-bottom: 1px solid #ccc; 
}

http://jsfiddle.net/MuAKF/

來源

2012-01-10 18:07:57

你可以這樣做：

.box { 
 
     position: relative; 
 
     width: 500px; 
 
    } 
 
    .border { 
 
     position: aboslute; 
 
     background: #ccc; 
 
     left: 100px; 
 
     bottom: 0; 
 
     width: 300px; 
 
     height: 1px; 
 
    }

<div class="box"> 
 
     <div class="border"> 
 
     
 
     </div> 
 
    </div>

但是有無限的可能性。有些比其他語義更正確;這個解決方案只是一個快速修復。

來源

2012-01-10 18:05:55 wanovak

你可以使用一個背景圖像：

.box{ 
    width:500px; 
    border-bottom: 1px solid #ccc; 
    background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/ 
    background-position: bottom left; 
    background-repeat:no-repeat; 
}

來源

2012-01-10 18:08:02

是的！你也可以使用CSS Gradients在CSS中生成圖像，如果它是簡單的漸變或純色：'background-image：linear-gradient（black，black）; background-size：50％1px;背景位置：50％100％'。 – 2016-05-09 09:38:43

我建議做這樣的事情，效果很好在Firefox

<style type="text/css"> 

.box{ 

    width: 500px; 

    height: 20px; 

} 

.boxHalfWidth{ 

    width: 250px; 

    height: 1px; 

    border-bottom: 1px solid #CCC; 

} 

</style> 

</head> 

<body> 

<div class="box"> 

some data 

<div class="boxHalfWidth"></div> 

</div> 

</body>

來源

2012-01-10 18:10:53 redDevil

不必要地使用額外的HTML元素。 – 2016-05-09 09:40:46

可以使用::之後或::之前的僞選擇器。像：

<div> something here </div>

CSS：

div { 
    width: 500px; 
    height: 100px; 
    position: relative; 
    padding-top: 20px; 
    margin-top: 50px; 
} 

div::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    width: 50%; 
    left: 25%; 
    border-top: 1px solid red; 
}

這裏是jsfiddle

來源

2014-06-04 08:05:33

這是答案 – 2017-05-25 16:35:41

您可以對垂直邊框使用相同的解決方案。 – titusfx 2017-10-03 11:20:07

這裏有個問題，我可以以任何方式使用**內容**部分來繪製邊框嗎？沒有使用** border **屬性？就是想 – Joey 2017-11-23 04:19:19

CSS：設置邊框寬度的一半

回答

相關問題