前回作ったボックスの、上下左右の枠線をそれぞれ変更してみてください。
上の枠線 属性は、border-top 線種は、solid
右の枠線 属性は、border-right 線種は、dashed
下の枠線 属性は、border-bottom 線種は、dotted
左の枠線 属性は、border-left 線種は、double
上下左右の枠線を変更したボックス
.box1{
width: 80px;
height: 80px;
padding: 10px 0px 0px 10px;
border-top: solid #FF9999 5px;
border-right: dashed #FF9999 5px;
border-bottom: dotted #FF9999 5px;
border-left: double #FF9999 5px;
}
今までは、上下左右の枠線を一括して定義していましたが、
今回のように、属性を分けることで、１つずつ、定義することもできます。
・・・・ということは？
自由にオシャレなボックスを、スタイルシートのみでデザインすることができる、
ということです
次のページでは、そんなボックスをつくってみましょー。
