QQ 1640076782
四角有阴影效果的CSS演示代码：
html源码：
<!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>无标题文档</title>
</head>
<body>
<div class=”box4″>
<h1>Handbags</h1>
<img src=”images/b5.jpg”>
<p>
<span class=”STYLE1″>The cute appearance will embellish your phone
Protect your earphone plug hole from dust and water
With this, you can share songs in iPhone, iPAD with another person without sharing your headset
Used to support iphone/ipad, can adjust angle arbitrarily</p>
<br />
<a href=”https://www.onepound.cn/”> onepound.cn </a>
<div class=”shr_box4″></div>
<div class=”shl_box4″></div>
</div>
</body>
</html>
CSS源码：
body {
font-size: 11px;
font-family: ‘Open Sans’, sans-serif;
color: #4A4A4A ;
text-align: center;
}
.box4{
margin: 20px auto;
min-height: 100px;
width: 300px;
padding: 10px;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.box4:before{
content: ”;
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(-14px,20px)
skew(-20deg);
}
.box4:after{
content: ”;
width: 50px;
height: 50px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(12px,25px)
skew(20deg);
}
.shr_box4{
width: 100px;
height: 100px;
bottom:0; right:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(-20px,-15px)
skew(20deg);
}
.shl_box4{
content: ”;
width: 100px;
height: 100px;
bottom:0; left:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(20px,-15px)
skew(-20deg);
}
.box4 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 ;
}
这个对于有些购物网站的产品展示来说还比较实用！
xueposter@gmail.com