几个边框属性:
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是默认值。