圓角矩形加陰影
圓角矩形陰影
HTML代碼
<div class="box"></div>CSS代碼
div.box{
width: 200px;
height: 100px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 2px 2px 2px 2px gray,
inset -2px -2px 2px 2px gray;
}
圓角
border-radius：左上 右上 右下 左下兽肤；
border-radius 有更多的功能套腹，可以做更多的小東西
可以用像素控制 也可以用百分比控制
陰影
box-shadow: inset <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
- inset
默認(rèn)陰影在邊框外。
使用inset后资铡，陰影在邊框內(nèi)（即使是透明邊框）电禀，背景之上內(nèi)容之下。 - <offset-x> <offset-y>
這是頭兩個(gè) <length> 值笤休，用來(lái)設(shè)置陰影偏移量尖飞。<offset-x> 設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊店雅。 <offset-y> 設(shè)置垂直偏移量政基，如果是負(fù)值則陰影位于元素上面∧掷玻可用單位請(qǐng)查看 <length> 沮明。
如果兩者都是0，那么陰影位于元素后面窍奋。這時(shí)如果設(shè)置了<blur-radius> 或<spread-radius> 則有模糊效果荐健。 - <blur-radius>
這是第三個(gè) <length> 值。值越大琳袄，模糊面積越大江场，陰影就越大越淡。 不能為負(fù)值挚歧。默認(rèn)為0，此時(shí)陰影邊緣銳利吁峻。 - <spread-radius>
這是第四個(gè) <length> 值滑负。取正值時(shí)，陰影擴(kuò)大用含；取負(fù)值時(shí)矮慕，陰影收縮。默認(rèn)為0啄骇，此時(shí)陰影與元素同樣大痴鳄。 - <color> 顏色
