# CSS3边框
[TOC]
## 圆角边框
`border-radius` :用于指定圆角边框的圆角半径。
* 如指定1个参数,则4个圆角都使用该长度作为半径。
* 如指定2个参数,则第一个参数作为左上角和右下角的半径,第二个参数作为右上角和左下角的半径。
* 如指定3个参数,第一个参数作为左上角的半径,第二个参数作为右上角和左下角的半径,第三个参数作为右下角的半径。
```html
<style>
div {
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
<body>
<div>border-radius 属性允许您为元素添加圆角边框! </div>
</body>
```
## 边框阴影
`box-shadow`属性用于增加盒模型元素的边框阴影。一共有5个参数。
* 第一个参数:控制阴影在水平方向的偏移。
* 第二个参数:控制阴影在垂直方向的偏移。
* 第三个参数:控制阴影的模糊程度。
* 第四个参数:控制阴影的缩放程度。
* 第五个参数:改属性值控制阴影的颜色。
```html
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 20px 10px 100px 100px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
```
**内部阴影**
{box-shadow:inset x-offset y-offset blur-radius spread-radius color}
对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}