Question

当我尝试设置按钮背景的样式时，我坚持使用CSS伪元素:before和:after。问题是这样的：当我只使用正z-索引来按顺序放置span本身及其伪元素时，:before和:after总是与元素重叠。当我使用负z-indices时，它没问题，但我不想改变其他底层元素的z-indices只是为了使按钮工作。

所以that's问题和that's目标要实现，除了负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;
}

Answer 1

去边境！ :)

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

基本上

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

和右边左边，顶部和填充的另一个相同！

Answer 2

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;
}

我摆脱了第二个伪元素并将之前的按钮放在了后面。可能需要一些颜色的工作......

只有在知道按钮的宽度时才有效，但

Answer 3

如果你不介意在你的html中放置属性，你可以这样做：

http://jsfiddle.net/RwGV9/

HTML中的

：

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

并在CSS中：

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

基本上使用内容将文本放在最高层：attr（）;并使你的文字在最深处消失（bg color =类型颜色不是很优雅，但它保持按钮的文本可供用户选择！）

Span的伪元素覆盖了元素本身

3 个答案: