FantasyWorld

用css控制border的樣式

1.

    border-style:dotted;
    border-color:#ffeeee;
    border-width:5px;

2.

    border-style:dashed;
    border-color:#ffeeee;
    border-width:5x;

3.

    border-style:solid;
    border-color:#ffeeee;
    border-width:5px;

4.

    border-style:double;
    border-color:#ffeeee;
    border-width:5px;

5.

    border-style:groove;
    border-color:#ffeeee;
    border-width:5px;

6.

    border-style:ridge;
    border-color:#ffeeee;
    border-width:5px;

7.

    border-style:inset;
    border-color:#ffeeee;
    border-width:5px;

8.

    border-style:outset;
    border-color:#ffeeee;
    border-width:5px;

border的細微調整

1.顏色的效果

藉由 border-color 可以調整整個邊框的顏色

方法如下

border-color:#FF0000 //這是將整個邊框邊成紅色

 border-color:#FF0000 #00FF00 #0000FF #FFF000; //分別定義上右下左四個方向的邊框顏色

 相當於

border-top-color:#FF0000;

border-right-color:#00FF00;

border-bottom-color:#0000FF;

border-left-color:#FFF000;

的縮寫，CSS允許使用者縮寫成一排，border-color:#FF0000 #00FF00 #0000FF #FFF000;

2.框線的效果

藉由border-style 可以調整整個邊框的樣式

方法如下

border-style:solid;//規定成實線，至於樣式則在上方有展現效果

如同border-color一樣可以進行縮寫

將

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:double;

border-left-style:ridge;

縮寫成

border-style:dotted solid double ridge;

效果如下

3.框線的寬度

框線的寬度也跟上面兩種屬性相同

能夠用

border-top-width:5px;

border-right-width:10px;

border-bottom-width:15px;

border-left-width:20px;

或

border-width:5px 10px 15px 20px;

來設定框線的上右下左的寬度

4.縮寫

可以用 boerder: 1px solid #ff0000;

來代表三個屬性，如果對邊框的要求沒有太特別的需求

可以用這種方法來表是邊框的樣式

5.關於字型置中、置左、置右

使用CSS - text-align

text-align有三個屬性

left、center、right

center

left

right

背景顏色

background : #ff0000