一、圆角边框
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)
[code]<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>