CSS3中的border屬性有一些新的屬性,可以讓我們更加靈活地設置邊框的樣式。其中一個比較有用的屬性就是border-radius。
.box { border: 1px solid #ccc; border-radius: 10px; }
這樣就可以讓一個盒子的邊框變得更加圓潤。但是,有時候我們需要設置一個邊框只在某一側顯示,這時可以使用border-{top/right/bottom/left}的形式設置:
.box { border-right: 3px solid red; }
這樣就可以讓一個盒子的右邊框變成紅色的。但是有時候我們需要設置邊框的長度,這時就可以使用border-{top/right/bottom/left}-width的形式設置:
.box { border-top-width: 2px; }
這樣就可以讓一個盒子的上邊框變得更加粗一些。當然,如果我們需要同時設置多個邊框的長度,可以使用border-width的形式設置:
.box { border-width: 2px 3px 4px 5px; }
這樣就可以讓一個盒子的上邊框為2px,右邊框為3px,下邊框為4px,左邊框為5px。
總之,border屬性是CSS中一個非常常用的屬性,有了CSS3新增的一些屬性,我們可以更加靈活地定義邊框的樣式。