AI智能
改变未来

CSS3 | 边框样式


一、圆角边框

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>

 

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS3 | 边框样式