HTML/CSS

CSS3 Styles

在CSS3中增加了一些屬性，讓網頁特效製作更為方便

Border Radius

這是一個產生圓角效果的屬性，可以分別設定四個角的圓半徑
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
     border-radius:15px;     --代表四個角都是15px
}

{
     border-top-left-radius:4px;            --將左上角圓半徑設為4px
     border-top-right-radius:15px;        --將左上角圓半徑設為15px
     border-bottom-left-radius:12px;    --將左上角圓半徑設為12px
     border-bottom-right-radius:10px;  --將左上角圓半徑設為10px
}

也可以寫成
{border-radius:4px 15px 12px 10px;}
依順序填入左上、右上、左下、右下角的圓半徑


要注意的是，如果圓半徑大於等於box的50%時，會變為圓形或橢圓形

{box-radius:50%;}

Box Shadow

box-shadow是一個陰影的屬性，總共有六個輸入值，前四個值都是尺寸值(不可以是%)，其中模糊強度blur不可為負，前兩個值為必填，其他可不填
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{box-shadow:offset-x offset-y blur-radius spread-radius color inset:}
依序代表X軸及Y軸位移值(可為負)、模糊強度、擴散強度(可為負)、陰影顏色、內陰影

{
     box-shadow:1px 2px 2px #000;   --表示陰影向下移1px、右移2px，模糊強度為2px
}

下面是blur-radus及spread-radius的效果

{box-shadow:1px 1px 2px #000,inset 1px 1px 2px blue;}     --分別設定外、內陰影

{box-shadow:-1px -2px 2px #000;}
將陰影位移值設為負

Text Shadow

text-shadow與box-shadow大致一樣只是套用在文字上，但只有四個輸入值
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{text-shadow:offset-x offset-y blur-radius color:}
依序代表X軸及Y軸位移值(可為負)、模糊強度、陰影顏色

{text-shadow:1px 2px 2px #000;}


Box Sizing

box-sizing是用來改變box長寬計算的屬性，首先要瞭解之前介紹過的Box Model

box-sizing有三種值分別是:content-box(預設)、padding-box、border-box
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{
     border:2px solid black;
     margin:20px;
     padding:10px;
     width:300px;
}
這個box的width是324px=300+10*2+2*2
這也是content-box的計算方式



如果改為padding-box，那width是304=300(280+20)+4
如果改為border-box，那width是300=276+20+4