css div 边框黑影运用情况图或內外层div完成层级觉

日期:2021-03-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

两种完成方式1种是运用內外层的div边框来案例层级觉得的css边框黑影实际效果,另外一种是运用了情况照片再加內外div来完成的这类实际效果更好看。
简易1点的纯css

拷贝编码
编码以下:

<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<title>cssdiv边框黑影</title>
<styletype="text/css">
body{padding:200px;}
div{border-width:1px;border-style:solid;padding:1px;}
.a{background-color:#f3f3f3;border-color:#fbfbfb;}
.b{background-color:#d8d8d8;border-color:#e8e8e8;}
.c{background-color:#fff;border-color:#bbb;height:100px;color:#ff0000;}
</style>
</head>
<body>
<divclass="a">
<divclass="b">
<divclass="c">边框为黑影实际效果</div>
</div>
</div>
</body>
</html>

繁杂1点的运用照片情况

拷贝编码
编码以下:

<!doctypehtmlpublic"-//w3c//dtdxhtml1.0transitional//en""http://www.027eat.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<htmlxmlns="http://www.027eat.com/1999/xhtml">
<head>
<title>css边框黑影</title>
<style>
.drops实例教程hadow2{
float:left;
clear:left;
background:url(http://www.6a8a.com/uploadfile/2011/0621/202996.png)no-repeatbottomright!important;
background:url(http://www.6a8a.com/uploadfile/2011/0621/209456.gif)no-repeatbottomright;
margin:10px010px10px!important;
margin:10px010px5px;
width:500px;
padding:0px;
}
.innerbox{
position:relative;
bottom:6px;
right:6px;
border:1pxsolid#999999;
padding:4px;
margin:0px0px0px0px;
}
.innerbox{
margin:0px0px⑶px0px;
margin:0px0px0px0px;
}
.innerboxp{
font-size:14px;
margin:3px;
}
</style>
</head>
<body>
<divclass="dropshadow2"><divclass="innerbox"><h4>css黑影:</h4><p>这段边框黑影实际效果如何呢?</p></div></div>
</body>
</html>