几个边框属性：
1、border-radius
该属性为边框添加圆角效果。
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
eg:
<style>
div
{
border:3px solid #a1a1a1;
padding:50px 80px;
background:#dddfff;
width:300px;
border-radius:15px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
效果：
2、box-shadow
该属性被用来添加阴影。
box-shadow :inset x-offset y-offset blur-radius spread-radius color属性至多有6个参数设置，他们分别取值：
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，如果取其唯一值“inset”
,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。
X-offset：是指阴影水平偏移量其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，则阴影在对象底部，反之其值为负值时，阴影在对象顶部。
blur-radius:阴影模糊半径：参数可选，其值只能是正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
spread-radius:阴影扩展半径，参数可选，其具体的值可正可负，如果为正，则整个阴影扩大，反之变小。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 20px 20px 5px -5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
3、border-image
CSS3边界图片，border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像。
三个属性：图片 剪裁位置 重复性
（1）图片(border-image-slice)
背景图可以使用url()调用，图片可以是相对路径或绝对路径。
（1）裁剪位置（border-image-slice）
没有单位，专指像素。 支持百分比值，百分比值大小相对于边框图片而言。
剪裁特性：其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，
（3）重复性
对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。
扫一扫
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
