0

我说的是 3 行而不是按钮本身。你如何在 pinterest.com 的左上角用纯 CSS 而不使用图像制作这 3 行？如何以优雅的方式制作适合那个小按钮空间的 3 行？

4

3 回答 3

1

现在有了 box-shadows 和 html5 支持！这是小提琴：http: //jsfiddle.net/v2w3C/1/

<a class="menu"><span class="line"></span></a>

和CSS！

.menu {
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #5f5f5f;
    font-weight: bold;
    display: inline-block;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(240, 240, 240));
    width: 36px; 
    height: 30px;
    padding: 2px 0 0 0;
    box-sizing: border-box;
}

.menu:hover {
    background-image: linear-gradient(#e63d44,#c11a22);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);
}

.menu .line {
    background: rgb(184,184,184);
    border-radius: 2px;
    box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);    
    display: block;
    margin: 10px auto 0 auto;
    height: 3px;
    width: 16px;
    content: " ";
    overflow: visible;
}

.menu:hover .line {
    background: rgb(255,255,255);
    box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);    
}
于 2013-09-06T21:47:51.900 回答
0

HTML：
<div class="line-separator"></div>

CSS：
.line-separator { height:1px; background: #999; border-bottom: 1px solid #333; }

background更改线条颜色，并border-bottom赋予其阴影效果。根据自己的喜好调整颜色。

于 2013-09-06T20:43:24.737 回答
0

有很多方法可以做到这一点。但我将发布我知道的最简单的方法。这是一个 unicode 字符：&#9776;它看起来像这样：☰

于 2013-09-06T21:55:08.260 回答