如何实现与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

回答

相关问题