3.用過CSS3嗎? 實(shí)現(xiàn)圓角矩形和陰影怎么做?

圓角border-radius； http://js.jirengu.com/yesazekuci/1/edit?html,css,output

陰影box-shadow； http://js.jirengu.com/tupexolavu/1/edit

實(shí)現(xiàn)圓角： 使用 border-radius

例： div {

? ? width: 100px;

? ? height: 100px；

? ? border: 1px solid green;

? ? border-radius: 10px;

}

border-radius 接受px、em、rem等等單位的值

border-radius 接受1-4個(gè)值：

1個(gè)值：四個(gè)角都為同一個(gè)值

2個(gè)值：左上角和右下角使用第一個(gè)值，右上角和左下角使用第二個(gè)值

3個(gè)值：左上角使用第一個(gè)值，右上、左下使用第二個(gè)值，右下角使用第三個(gè)值

4個(gè)值：從左上起順時(shí)針使用1-4個(gè)值

border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius 分別表示四個(gè)角，可以單獨(dú)設(shè)置樣式

實(shí)現(xiàn)陰影：使用 box-shadow

例：? ? div {

? ? ? width: 100px;

? ? ? height: 100px;

? ? ? border: 1px solid green;

? ? ? box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

? }

box-shadow 有五個(gè)值： inset（陰影默認(rèn)在邊框之外，使用inset則在邊框內(nèi)） 、 <offset-x>/<offset-y> （設(shè)置陰影偏移量，x表示水平偏移，y表示垂直偏移，可以有負(fù)值）、 <blur-radius> （此值越大，模糊面積越大，陰影越淡）、 <spread-radius> （默認(rèn)為0，正值時(shí)，陰影擴(kuò)大；負(fù)值時(shí)，陰影縮小）、 <color> （設(shè)置陰影顏色）