====任务描述====
【原文链接】http://ife.baidu.com/task/detail?taskId=4
任务目标
- 实践HTML/CSS布局方式
- 深入了解position等CSS属性
任务描述
- 实现如 示例图（点击打开） 的效果
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
- 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况，尤其是极端情况下的效果。
- 调节浏览器宽度，灰色元素始终水平居中。
- 调节浏览器高度，灰色元素始终垂直居中。
- 调节浏览器高度和宽度，黄色扇形的定位始终准确。
- 其他效果图中给出的标识均被正确地实现，错一项扣一分。
====总结====
1. 怎么样让div垂直居中
#content{
height:200px;
400px;
position:absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left:-200px;
2.怎么样画四分之一圆
圆的画法：先画相应矩形，在用border-radius
{
50px;
height:50px;
border-radius:50px 0 0 0;
}
border-radius:50px 0 0 0
等价于将border-raduis属性分成四个属性来设置，把一个圆分成上左，上右，下右，下左4份
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius: