css中边框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中边框样式</title>
<style>
div{ margin: 5px;}
#box1{ width:100px;height: 100px;border: 1px solid; line-height: 100px; text-align: center}
#box2{ width:100px;height: 100px;border: 2px double; line-height: 100px; text-align: center}
#box3{ width:100px;height: 100px;border: 1px dashed; line-height: 100px; text-align: center}
#box4{ width:100px;height: 100px;border: 1px dotted; line-height: 100px; text-align: center}
#box5{ width:100px;height: 100px;border: 1px solid; border-radius: 20px; line-height: 100px; text-align: center}
#box6{ width:100px;height: 100px;border:none; background: #0ba4da; line-height: 100px; text-align: center}
#box7{ width:100px;height: 100px;border:1px solid; box-shadow: 5px 5px 5px#aaa; background: #0ba4da; line-height: 30px; text-align: center}
#box8{ width:100px;height: 100px; box-shadow: 0px 0px 30px 10px inset #aaa; line-height: 100px; text-align: center}
</style>
</head>
<body>
<div id="box1">实线</div>
<div id="box2">双实线</div>
<div id="box3">虚线</div>
<div id="box4">圆点虚线</div>
<div id="box5">圆角</div>
<div id="box6">无边框</div>
<div id="box7">阴影box-shadow: x y 模糊距离</div>
<div id="box8">内阴影</div>
</body>
</html>