css border-left 50％高度

我想讓我的div的左邊框只顯示div的一半。我想對我的右邊框做同樣的處理，但是應該從div的底部設置到div的中間。我怎樣才能實現它？css border-left 50％高度

2010-05-14 Piotr Ptak

你不能直接這樣做。有幾種方法可以解決這個問題。但首先，你有一個固定的寬度和/或高度？ – choise 2010-05-14 20:38:58

你必須假裝它。圖片，js，假divs ... – 2010-05-14 20:43:13

是的，這是一個固定的寬度。我知道我可以通過指定一些圖片等來做到這一點，我怎樣才能通過使用JS來做到這一點？ – 2010-05-14 23:29:36

好問題。這是不可能的使用邊界屬性。

唯一想到的是，如果您可以將div的position設置爲relative，則使用絕對定位的1像素寬的div。不徹底的測試，但這個應該工作：

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
      background-color: blue; overflow: hidden'> 
&nbsp; 
</div>

你會做同樣的右側，由right更換left財產。

請記住，周圍的div需要position: relative這個工作。我不確定50％的身高設置是否可以在整個瀏覽器中始終如一地運行 - 請確保對其進行測試。如果沒有，您可能不得不採用像素測量。

來源

2010-05-14 20:42:00

真是太神奇了，那是我在尋找'... – 2011-07-15 16:48:10

一個排序的相似，但不同的方法來@佩卡的：使用:after僞選擇，像這樣：

HTML標記：

<div class="mybox"> 
    Le content de box. 
</div>

CSS：

.mybox { 
    position: relative; 
    padding: 10px 20px; 
    background-color: #EEEEEE; 
} 

.mybox:after { 
    content: ''; 
    position: absolute; 
    bottom: 0px; 
    left: 25%; 
    width: 50%; 
    border-bottom: 1px solid #0000CC; 
}

...和一個jsFiddle爲好措施。

來源

2014-01-24 17:17:48 indextwo

注意，因爲這是我更受歡迎的答案之一：如果需要，也可以使用'：before'僞選擇器。經銷商的選擇。我在這裏使用'：之後'的唯一原因是因爲我喜歡視覺層次結構，所以底部的東西在'後面'。 – indextwo 2018-02-20 10:25:44

您可以使用：

line-height:50%; /*(or less, much less)*/ 
overflow:visible;

的文字是可見的，但邊框顏色將僅在DIV大小的一半。

來源

2014-02-13 04:12:25

謝謝這適用於我 – NaveenDA 2017-03-24 18:53:24

2018：對於現代瀏覽器：

您可以使用border-image與梯度像...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%); 
border-image-slice: 1;

演示：https://jsfiddle.net/hz8wp0L0/

工具：Gradient Editor

我可以使用：border-image（IE11）

來源

2018-01-23 10:22:39 l2aelba

css border-left 50％高度

回答

相關問題