下面是个边框练习
3721
2018-11-29 16:06:13
143
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style type="text/css">
body{background:#66b3ff;}
*{padding:0px;margin:0px;}
h3{color:yellow;margin:20px 0px 0px 20px;}
span{font-size:2em;color:pink;}
.t1{width:100px;height:150px;border:2px;border-radius:15px;background:#ccc;padding-top:10px;padding-left:5px;margin-left:50px;color:#000;}
.t2{width:100px;height:150px;border:2px;border:dashed blue;margin:10px 0px 0px 70px;padding-left:3px;background:red;color:#fff;}
.t3{width:100px;height:150px;border:dotted green;margin:10px 0px 0px 90px;background:#000;color:#fff;}
.t4{width:100px;height:150px;background:pink;border-left:3px solid green;border-bottom:3px solid green;margin:10px 0px 0px 110px;}
.t5{width:100px;height:150px;margin:10px 0px 0px 130px;border:none;background:#ccc;box-shadow:6px 3px 3px blue;}
.t6{width:100px;height:150px;margin:10px 0px 30px 150px;background:#f75000;box-shadow:inset 0px 20px 80px yellow;}
</style>
</head>
<body>
<h3>下面是<span>边框</span>练习的实例</h3><br>
<div class="t1">圆角边框</div>
<div class="t2">虚线边框</div>
<div class="t3">点状边框</div>
<div class="t4">只有左下边框</div>
<div class="t5">外部阴影</div>
<div class="t6">内部阴影</div>
</body>
</html>
