CSS border螻樊ァ
border
border-width縲|order-style縲|order-color 繧偵∪縺ィ繧√※謖螳
left/right/top/bottom繧貞句挨縺ォ險ュ螳壼庄閭ス縲
<div id="box1">box</div>
<style>
縲#box1 {
縲縲width: 100px;
縲縲height: 100px;
縲縲border:1px solid #888;
縲}
</style>
border-style
險ュ螳壽焚縺ョ驕輔>縺ォ繧医k荳贋ク句キヲ蜿ウ縺ョ險ュ螳壽婿豕輔↓蠕薙≧
邨霎シ縺ソ蛟、繧呈欠螳壹
蛟、 | 讖溯ス | 萓 |
---|---|---|
謖螳夂┌縺 | none謇ア縺 | |
none(隕丞ョ) | 髱櫁。ィ遉コ | |
hidden | 髱櫁。ィ遉コ | |
solid | 1譛ャ邱 | |
double | 2譛ャ邱 | |
groove | 遶倶ス鍋噪縺ォ遯ェ繧薙□邱 | |
ridge | 遶倶ス鍋噪縺ォ髫襍キ縺励◆邱 | |
inset | 荳翫→蟾ヲ縺梧囓縺丈ク九→蜿ウ縺梧弱k縺邱 | |
outset | 荳翫→蟾ヲ縺梧弱k縺丈ク九→蜿ウ縺梧囓縺邱 | |
dashed | 遐エ邱 | |
dotted | 轤ケ邱 |
border-color
險ュ螳壽焚縺ョ驕輔>縺ォ繧医k荳贋ク句キヲ蜿ウ縺ョ險ュ螳壽婿豕輔↓蠕薙≧
邨霎シ縺ソ蛟、/16譁ー謨ー蛟、縺ァ謖螳
border-color: red;
border-color: #ff0000;
border-width
險ュ螳壽焚縺ョ驕輔>縺ォ繧医k荳贋ク句キヲ蜿ウ縺ョ險ュ螳壽婿豕輔↓蠕薙≧
邨霎シ縺ソ蛟、/謨ー蛟、縺ァ謖螳
border-width: thin;
border-width: 16px;
thin(邏ー縺)
medium(譎ョ騾)
thick(螟ェ縺)
border-radius
<div id="box2">box</div>
<style>
縲#box2 {
縲縲width: 100px;
縲縲height: 100px;
縲縲margin:10px;
縲縲padding:6px 10px;
縲縲border:1px solid #888;
縲縲border-radius:5px;
縲}
</style>
border-collapse
table縺ォ縺翫¢繧狗キ夐俣髫
border-collapse: collapse;髢馴囈縺ェ縺
border-collapse: separate;髢馴囈縺ゅj(隕丞ョ)
margin縲}adding
<div id="box3">box</div>
<style>
縲#box3 {
縲縲width: 100px;
縲縲height: 100px;
縲縲margin:10px;
縲縲padding:6px 10px;
縲縲border:1px solid #888;
縲}
</style>
box-shadow
<div id="box4">box</div>
<style>
縲#box4 {
縲縲width: 100px;
縲縲height: 100px;
縲縲margin:10px;
縲縲padding:6px 10px;
縲縲border:1px solid #888;
縲縲border-radius:5px;
縲縲box-shadow: 0 0 5px #ccc;
縲縲box-shadow: 0 0 10px #ccc;
縲}
</style>