倒圆角
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <h1>圆角边框 —— border-radius IE9</h1>
 <!-- border-radius 是复合属性 -->
 border-radius: 20px;<!-- 四个角圆的半径为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标准参数5个 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.默认向外扩展阴影,如需向内,加 inset。
 2.对于一个盒子,可以叠加使用阴影,并可以同时内外阴影。
 </p>
 text-shadow: 文字阴影 四个参数 少了延展值 IE10兼容
 使用,同上。
  
</body>
</html>
更多专业前端知识,请上 【猿2048】www.mk2048.com