<!DOCTYPE html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
body{
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
background:url(spotlight.jpg) top center;
}
#Wrapper{
width: 960px;
margin: 0 auto 0 auto;
color: #FFF;
}
#Menu{
height: 30px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: #FFF 0 0 5px;
-moz-box-shadow: #FFF 0 0 5px;
box-shadow: #FFF 0 0 5px;
margin-bottom: 10px;
behavior: url(/PIE.htc);
}
#Menu2{
height: 30px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: #FFF 0 0 5px;
-moz-box-shadow: #FFF 0 0 5px;
box-shadow: #FFF 0 0 5px;
margin-bottom: 10px;
behavior: url(/PIE.htc);
}
#Menu3{
height: 30px;
-webkit-box-shadow: #FFF 0 0 5px;
-moz-box-shadow: #FFF 0 0 5px;
box-shadow: #FFF 0 0 5px;
margin-bottom: 10px;
behavior: url(/PIE.htc);
}
#Menu4{
height: 30px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: 2px solid #FFF;
margin-bottom: 10px;
behavior: url(/PIE.htc);
}
</style>
</head>
<body>
<div id="Wrapper">
Div with box shadow and rounded corners, no background color:
<div id="Menu">
</div>
Div with box shadow and rounded corners, no background color, but using a clear 1px gif image:
<div id="Menu2">
</div>
Div with box shadow, no background color:
<div id="Menu3">
</div>
Div with rounded corners and a 2px white border, no background color:
<div id="Menu4">
</div>
</div>
</body>
Forums
