CSS3-2
倒圓角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>圓角邊框 —— border-radius IE9</h1>
<!-- border-radius 是復(fù)合屬性 -->
border-radius: 20px;<!-- 四個(gè)角圓的半徑為20px -->
border-radius： **px **px **px **px;<!-- 和padding，margin用法相同 -->
border-top-left:;
border-top-right:;
border-bottom-left:;
border-bottom-right:;
<!-- 還可以百分比變化 -->
border-radius: 50%；
<h1>陰影 —— box-shadow和text-shadow</h1>
box-shadow和text-shadow
box-shadow標(biāo)準(zhǔn)參數(shù)5個(gè) IE9開始兼容
box-shadow: 6px 6px 10px 10px red;
向右偏移值 向下偏移值 模糊半徑 延展寬度 顏色
box-shadow: 6px 6px 10px 10px red,
6px 6px 10px 10px blue,
inset 6px 6px 10px 10px yellow,
inset 6px 6px 10px 10px green;
<p>
注：
1.默認(rèn)向外擴(kuò)展陰影，如需向內(nèi)，加 inset。
2.對(duì)于一個(gè)盒子，可以疊加使用陰影，并可以同時(shí)內(nèi)外陰影。
</p>
text-shadow: 文字陰影 四個(gè)參數(shù) 少了延展值 IE10兼容
使用，同上。
</body>
</html>
?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
- 上一篇： MVC 之var与dynamic
- 下一篇： 深入理解脚本化CSS系列第二篇——查询计