abstrak：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css中邊框樣式</title> <style>
<!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>
Guru membetulkan：滅絕師太Masa pembetulan：2019-02-11 16:06:19
Rumusan guru：測試的比較全面,后期要運用的實例,繼續(xù)加油!