0

当我试图对按钮的背景进行风格化时，我被CSS 伪元素:before所困扰。:after问题是这样的：当我只使用正 z 索引将span自身及其伪元素以正确的顺序放置时，:before并且:after总是与元素重叠。当我使用负 z-indices 时，没关系，但我不想更改其他底层元素的 z-indices 只是为了使按钮工作。

所以这就是问题所在，这就是除了负 z 指数之外要实现的目标。

问题代码：

.button {
    display: inline-block;
    z-index:3;
    position: relative;
    left: 25px;
    top: 25px;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgb(96,96,100);
    border: 1px solid #202020;
    color: #dddddd;
}

.button:before {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: rgba(85,85,90, .7);
    padding: 10px;
    left: -10px;
    top: -10px;
}

.button:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: rgba(85,85,90, .4);
    padding: 20px;
    left: -20px;
    top: -20px;
}
4

3 回答 3

1

去边界！:)

http://jsfiddle.net/RwGV9/1/

基本上

border:solid 10px rgba(85,85,90, .7);
left: -10px;
top: -10px;

另一个右左，顶部和填充的东西也一样！

于 2013-03-21T13:42:07.963 回答
0

http://jsfiddle.net/D8gDK/

.button {
display: inline-block;
position: relative;
left: 25px;
top: 25px;
width: 100px;
    height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
display: block;
width: 140px;
height: 60px;
position: relative;
background: rgba(85,85,90, .7);
border: 10px solid rgba(85,85,90, .4);
padding: 10px;
left: -40px;
top: -20px;
}

我摆脱了第二个伪元素并将之前放在按钮后面。可能需要对颜色进行一些处理...

仅当您知道按钮的宽度时才有效

于 2013-03-21T13:30:43.943 回答
0

如果您不介意在 html 中添加属性，您可以这样做：

http://jsfiddle.net/RwGV9/

在 HTML 中：

<span data-text='button !' class="button">button</span>

在 CSS 中：

.button:before {
content: attr(data-text);

基本上使用内容按钮将文本放在最高层：attr(); 并使您的文本消失在最深处（bg color = type color 不是很优雅，但它使按钮的文本可供用户选择！）

于 2013-03-21T13:33:05.423 回答