#yyds干活盘点# 2 CSS3 的边框

Posted 2022-02-16 江下下啊

一、CSS3的边框：

1.border-radius：用于创建圆角

• border-radius属性

• 四个值：左上角，右上角，右下角，左下角
• 三个值：左上角，右上角和左下角，右下角
• 两个值：左上角与右下角，右上角与左下角
• 一个值：四个圆角值相同

2.border-image：使用图片创建边框

• border-image属性

值	说明
border-image-source	边框图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像是否应该平铺、铺满、或拉伸

3.box-shadow ：用来添加阴影

• Box-shadow的属性

值	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影