CSS border属性
border
border-width、border-style、border-color をまとめて指定
left/right/top/bottomを個別に設定可能。
<div id="box1">box</div>
<style>
#box1 {
width: 100px;
height: 100px;
border:1px solid #888;
}
</style>
border-style
設定数の違いによる上下左右の設定方法に従う
組込み値を指定。
| 値 | 機能 | 例 |
|---|---|---|
| 指定無し | none扱い | |
| none(規定) | 非表示 | |
| hidden | 非表示 | |
| solid | 1本線 | |
| double | 2本線 | |
| groove | 立体的に窪んだ線 | |
| ridge | 立体的に隆起した線 | |
| inset | 上と左が暗く下と右が明るい線 | |
| outset | 上と左が明るく下と右が暗い線 | |
| dashed | 破線 | |
| dotted | 点線 |
border-color
設定数の違いによる上下左右の設定方法に従う
組込み値/16新数値で指定
border-color: red;
border-color: #ff0000;
border-width
設定数の違いによる上下左右の設定方法に従う
組込み値/数値で指定
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;間隔あり(規定)
margin、padding
<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>
１週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能