我尝试使用图像和 css 伪元素添加框阴影和渐变边框。
我试过那个代码:
.box:before {
content: url('box-shadow.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
z-index: -1;
bottom: -9px;
line-height: 0;
}
.box:after {
content: url('box-border.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
bottom: -5px;
right: 0px;
}
但是添加的图像不会在父 div 调整大小时调整大小,而它通过手动添加图像来工作。
看到那个 fiddle http://jsfiddle.net/5TG3E/2/
最佳答案
我从我这边试试可能对你有帮助。像这样写:
.box:after {
content:'';
position: absolute;
z-index: -1;
bottom: -9px;
margin: 0 auto;
top:0;
left:0;
right:0;
background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
-moz-background-size:100% 9px;
background-size:100% 9px;
}
.box:before {
content:'';
position: absolute;
bottom: 0px;
right: 0px;
left:0;
top:0;
background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}
关于css - 如何使用伪元素添加响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10425162/