QQ 1640076782

2014年03月31日

纯CSS 实现元素底部有阴影效果

Filed under: 英语网站设计 — 标签：, — lifengwu @ 1:01 上午

图片底部有阴影效果，直接通过CSS实现，不用再借助背景图片

效果：

源码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>test box</title>
<link href=”css/global.css” rel=”stylesheet” type=”text/css” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
<!–
body {
font-size: 11px;
font-family: ‘Open Sans’, sans-serif;
color: #4A4A4A ;
text-align: center;
}
.box {
background: #fff;
margin: 20px auto;
display: block;
width: 300px;
height: 510px;
padding:20px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
.box img {
width: 100%;
margin-top: 15px;
}
p{
margin-top: 15px;
text-align: justify;
}
h1{
font-size: 20px;
font-weight: bold;
margin-top: 5px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a{
text-decoration: none;
color: #4A4A4A !important;
}
a:hover{
text-decoration: underline;
color: #6B6B6B !important ;
}
–>
</style>
</head>
<body>
<div>
<h1>test Box</h1>
<img src=”images/b2.jpg” />
<p>
Lorem ipsum dolor sit amet, <span>consectetur</span> adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.       </p>
<br />
<a href=”https://www.onepound.cn”> www.onepound.cn </a>
</div>
</body>
</html>

如果对产品表表图片有特殊要求，这个比较实用！