枠線のスタイルの設定枠線のスタイルを設定するには、 border-???-styleプロパティを設定します。 border-top-style: 上の枠線のスタイル border-bottom-style: 下の枠線のスタイル border-left-style: 左の枠線のスタイル border-right-style: 右の枠線のスタイル border-style: 上下左右の枠線のスタイル </pre> 指定できるスタイルには、 次のような種類があります。 -none(枠線を消す) -hidden(枠線を消す) -solid(直線) -double(二重線) -dashed(破線) -dotted(点線) -groove(右下から光が当たったような枠) -ridge(左下から光が当たったような枠) -inset(ボタンが押されたような線) -outset(ボタンが浮き出たような線) border-styleプロパティを使えば、 上下左右の枠線のスタイルを一度に指定できます。 その場合は、値を半角スペースで区切ります。 値の個数によって、次のように枠線が設定されます。 -値が1つ: 「上下左右」を指定 -値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」 -値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」 -値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」 #pre(novervatim){{ h1{ border-style: dotted dotted dotted solid; } h2{ border-top-style: solid; border-left-style: dashed; } h3{ border-style: inset; } </pre> |