烛光6年前
border样式中的边框线有哪些： solid实线、double双实线、dashed虚线、dotted点虚线
border-raidus设置边框的圆角 box-shadow:设置边框的阴影 box-shadow:0px 6px 30px #ccc inset; 默认是向外的阴影，如果设置inset则向内的阴影
0
云雾幻灵6年前
border标签：solid实线 double双实线 dashed虚线 dotted点 border-radius：像素 将直角转为圆角 box-shadow：像素 颜色 设置阴影大小、颜色
0
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
