一、圆角边框
border-radius: a;(四角圆角半径为a)
border-radius: a. b (左上右下圆角半径为a,左下右上圆角半径为b)
border-radius: a, b, c (左上圆角半径为a,左下右上圆角半径为b,右下圆角半径为c)
border-radius: a, b, c, d (左上圆角半径为a,右上圆角半径为b,右下圆角半径为c,左下圆角半径为d)
二、阴影制作
box-shadow:a, b, c, d #fff inset; (用于向方框添加阴影)
其中a用来设置对象的阴影水平偏移值,可以为负值
其中b用来设置对象的阴影垂直偏移值,可以为负值
其中a用来设置对象的阴影模糊值,不可以为负值
其中a用来设置对象的阴影外延值,可以为负值
#fff:阴影的颜色
inset:内阴影,在按钮处常用,不必须,可删除
三、边框图片
border-image-source: 设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice: 设置或检索对象的边框背景图的分割方式
border-image-width: 设置或检索对象的边框厚度
border-image-outset: 设置或检索对象的边框背景图的扩展
border-image-repreat: 设置或检索对象的边框图像的平铺方式(平铺repeated,铺满rounded,拉伸stretched)
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div{
width: 182px;
height: 182px;
background: #ccc;
border: 30px solid transparent;
border-image: url('bd.png') 26 26 round;
}
</style>
</head>
<body>
<div><img src="b.png" ></div>
</body>
</html>