如何解决如何实现css3的阴影效果?
| 关闭。这个问题需要更加集中。它当前不接受答案。解决方法
起初,我认为不可能。然后,我发现此页面在纯CSS中显示了一些不错的示例。
好漂亮
请参阅演示页以了解可以实现的目标。
, 仅HTML和CSS
阴影会自动适应图像的宽度。
使用PNG图像,可以完成以下操作:
(尚未经过详尽的兼容性测试,但可以在最新的FF,Safari和Chrome浏览器中使用)
<style type=\"text/css\" media=\"all\">
.shadow {
position:relative;
width:auto;
padding:0;
margin:0;
}
.shadow:before,.shadow:after {
content:\"\";
position:absolute;
z-index:-1;
}
.arch01:after {
position:absolute;
padding:0; margin:0;
height:34px;
width:100%;
bottom:-30px;
left:0px; right:0px;
background-image: url(\'arch_01.png\');
background-size:100% 100%;
background-position:left top;
}
</style>
<span class=\"shadow arch01\">
<img src=\"photo.jpg\" width=\"500px\" height=\"250px\">
</span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。