37216年前
<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;}/*设置为黄色，内边距上部和左边都为20*/
span{font-size:2em;color:pink;}/*字体2倍大小，颜色粉色*/
.t1{width:100px;height:150px;border:2px;border-radius:15px;background:#ccc;padding-top:10px;padding-left:5px;margin-left:50px;color:#000;}/*设置大小，边框为2，圆角，背景色，上内边距10（为了显示文字），左内边距5，左外边距50，字体黑色*/
.t2{width:100px;height:150px;border:2px;border:dashed blue;margin:10px 0px 0px 70px;padding-left:3px;background:red;color:#fff;}/*设置大小，边框为2，虚线边框，蓝色，外边距上为10（与上面元素隔开），左为70，（下面几个元素依次递增20，为了有楼梯效果），左内边距3，红背景色，字体颜色白色*/
.t3{width:100px;height:150px;border:dotted green;margin:10px 0px 0px 90px;background:#000;color:#fff;}/*设置大小，边框点状虚线，绿色，外边距上10左90，背景色黑色，字体颜色：白*/
.t4{width:100px;height:150px;background:pink;border-left:3px solid green;border-bottom:3px solid green;margin:10px 0px 0px 110px;}/*设置大小，背景色：粉色，左边框粗细3，实线，绿色，下边框粗细3，实线，绿色，外边距上10左110*/
.t5{width:100px;height:150px;margin:10px 0px 0px 130px;border:none;background:#ccc;box-shadow:6px 3px 3px blue;}/*设置大小，外边距上10左130，边框不显示，背景色ccc，阴影：X轴6，Y轴3，阴影宽度3，阴影颜色：蓝色*/
.t6{width:100px;height:150px;margin:10px 0px 30px 150px;background:#f75000;box-shadow:inset 0px 20px 80px yellow;}/*设置大小，外边距上10，下30（由于下面没有元素，为了完整显示这个div，所以设置下30px）,左150，背景色#f75000，阴影：内部，X轴0，Y轴20，阴影宽度80，阴影颜色：黄色*/
</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>
0
