第2章 css邊框屬性
圓角效果 border-radius
border-radius是向元素新增圓角邊框。
使用方法:
border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px;
/* 四個半徑值分別是左上角、右上角、右下角和左下角,順時針 */
不要以為border-radius的值只能用px單位,你還可以用百分比或者em,但相容性目前還不太好。
實心上半圓:
方法:把高度(height)設為寬度(width)的一半,並且只設置左上角和右上角的半徑與元素的高度一致(大於也是可以的)。
div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半徑至少設定為height的值*/ }
實心圓:
方法:把寬度(width)與高度(height)值設定為一致(也就是正方形),並且四個圓角值都設定為它們值的一半。如下程式碼:
div{
height:100px;/*與width設定一致*/
width:100px;
background:#9da;
border-radius:50px;/*四個圓角值都設定為寬度或高度值的一半*/
}
陰影 box-shadow(一)
box-shadow是向盒子新增陰影。支援新增一個或者多個。
很簡單的一段程式碼,就實現了投影效果,酷斃了。我們來看下語法:
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
引數介紹:
注意:inset 可以寫在引數的第一個或最後一個,其它位置是無效的。
為元素設定外陰影:
示例程式碼:
.box_shadow{
box-shadow:4px 2px 6px #333333;
}
效果:
為元素設定內陰影:
示例程式碼:
.box_shadow{ box-shadow:4px 2px 6px #333333 inset; }
效果:
新增多個陰影:
以上的語法的介紹,就這麼簡單,如果新增多個陰影,只需用逗號隔開即可。如:
.box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
效果:
陰影 box-shadow(二)
1、陰影模糊半徑與陰影擴充套件半徑的區別
- 陰影模糊半徑:此引數可選,其值只能是為正值,如果其值為0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;
- 陰影擴充套件半徑:此引數可選,其值可以是正負值,如果值為正,則整個陰影都延展擴大,反之值為負值時,則縮小;
2、X軸偏移量和Y軸偏移量值可以設定為負數
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
X軸偏移量為負數:
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:-4px 4px 6px #666;
}
效果圖:
Y軸偏移量為負數:
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px -4px 6px #666;
}
效果圖:
為邊框應用圖片 border-image
顧名思義就是為邊框應用背景圖片,它和我們常用的background屬性比較相似。例如:
background:url(xx.jpg) 10px 20px no-repeat;
但是又比背景圖片複雜一些。
想象一下:一個矩形,有四個邊框。如果應用了邊框圖片,圖片該怎麼分佈呢? 圖片會自動被切割分成四等分。用於四個邊框。
可以理解為它是一個切片工具,會自動把用做邊框的圖片切割。怎麼切割呢?為了方便理解,做了一張特殊的圖片,由9個矩形(7070畫素)拼成的一張圖(210210畫素),並標註好序號,是不是像傳說中的九宮圖,如下:
我們把上圖當作邊框圖片 來應用一下, 看一看是什麼效果
根據border-image的語法:
#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat
}
效果:
從序號可以看出div的四個角分別對應了背景圖片的四個角。而2,4,6,8 被重複。5在哪?因為是從四周向中心切割圖片的所以,5顯示不出來。而在chrome瀏覽器中5是存在的,下圖的樣子:
repeat的意思就是重複,目前因為是剛好被整除,效果看不出來。如果改下DIV的寬高,再來看重複的效果:
邊角部分為裁掉了,可見repeat就是一直重複,然後超出部分剪裁掉,而且是居中開始重複。
Round 引數:Round可以理解為圓滿的鋪滿。為了實現圓滿所以會壓縮(或拉伸);
#border-image {
width:170px;
height:170px;
border:70px solid;
border-image:url(borderimg.png) 70 round;
}
效果:
可見圖片被壓扁了。
Stretch 很好理解就是拉伸,有多長拉多長。有多遠“滾”多遠。
border-image:url(borderimg.png) 70 stretch
看一下效果:
2,4,6,8分別被拉伸顯示。
注意:Chrome下,中間部分也會被拉伸,webkit瀏覽器對於round屬性和repeat屬性似乎沒有區分,顯示效果是一樣的。
Firefox 26.0 下是可以準確區分的。