如何實現與CSS

-1

我知道這是可能的風格<hr>元素，水平線以下的風格，但是我不知道該如何實現下面來看一下：如何實現與CSS

enter image description here

它可能很難看，基本上它應該看起來像（水平豎立）5px深褐色，淺棕色，5px深棕色，也有hr周圍的圖像背景，使其更加突出，它不是設計的一部分。這是可以實現與CSS（如果如此）或我需要使用圖形？

來源

2013-02-04 Ilja

正在使用一個邊界（即邊界 - 底部）一個可行的替代使用HR？ – 2013-02-04 21:45:51

雖然是這樣，但我無法想象如何以這種方式設計邊框，我正努力用hr來達到這個目的。 – Ilja

這裏有一種方法：

<hr style="border:0;height:1px;background: #dfded9; border-right: 5px solid #b2b1ae;border-left: 5px solid #b2b1ae">

http://jsfiddle.net/KvGKV/

來源

2013-02-04 22:01:35 MikeSmithDev

使用border-top和border-bottom。

<hr style="border-top: 1px solid #DEDDD9;border-bottom: 1px solid #DEDDD9;">

或

<hr style="border: 1px solid #DEDDD9;">

來源

2013-02-04 21:50:21

嗨它不是這樣，我知道它很難從圖片中看到，但基本上它應該看起來像（水平豎立）5px深褐色，淺棕色，5px深棕色 – Ilja

我不知道我按照你的問題，但你可能能夠使用漸變像這樣：

jsFiddle

風格的hr像這樣：

hr { 
    height: 10px; 
    background-image: linear-gradient(black, white); 
    background: -webkit-gradient(linear, center top, center bottom, from(black), to(white)); 
}

除了更換黑色和白色與你想要的顏色。

來源

2013-02-04 22:04:05 War10ck

如何實現與CSS

回答

相關問題