CSS border螻樊ァ

border

border-width縲|order-style縲|order-color 繧偵∪縺ィ繧√※謖螳
left/right/top/bottom繧貞句挨縺ォ險ュ螳壼庄閭ス縲

box

<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

box

<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

box

<div id="box3">box</div>
<style>
縲#box3 {
縲縲width: 100px;
縲縲height: 100px;
縲縲margin:10px;
縲縲padding:6px 10px;
縲縲border:1px solid #888;
縲}
</style>

box-shadow

box

<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>

Follow me!

蜑阪ョ險倅コ

CSS margin/padding螻樊ァ

谺。縺ョ險倅コ

CSS display螻樊ァ