CSS3快速上手之10：图文效果

来源：互联网发布：练级的网络手机游戏编辑：程序博客网时间：2024/06/06 01:02

1.代码：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>图片title</title> <style>#boxshadow {    position: relative;    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);    padding: 10px;    background: white;}/* Make the image fit the box */#boxshadow img {    width: 100%;    border: 1px solid #8a4419;    border-style: inset;}#boxshadow::after {    content: '';    position: absolute;    z-index: -1; /* hide shadow behind image */    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);    width: 70%;    left: 15%; /* one half of the remaining 30% */    height: 100px;    bottom: 0;}</style></head><body><div id="boxshadow">  <img src="figure.jpg" alt="Norway" width="600" height="400"></div></body></html>

2.代码中需要的素材(figure.jpg)：

3.结果：

0 0