边框属性

边框属性

属性	说明
border-radius	设置边框圆角
border-image	设置图像边框
border-shadow	设置边框阴影

 

 

 

 

 

 

 

1. border-radius

border-radius属性用于创建边框圆角，默认值为none

单位： px 、 %

分样式写法：

• border-top-left-radius：单独设置左上角圆角
• border-top-right-radius：单独设置右上角圆角
• border-bottom-left-radius：单独设置左下角圆角
• border-bottom-right-radius：单独设置右下角圆角

复合属性写法：

• 一个值：同时设置四个角，且四个角都相同
• 两个值：第一个值左上角和右下角，第二个值右上角和左下角
• 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
• 四个值：分别对应左上角、右上角、右下角、左下角

例：

/*margin: 50px 0 0 50px;/*上右下左*/*/
/*margin: 0 50px 10px*/;/*上0，左右50，下10*/
/*margin: 20px 30px;*//*上下20，左右30*/
/*margin: 10px;*//*四个方向都是10px*/

2. border-image💡

border-image属性用于设置图像边框

语法：

border-image: source slice width outset repeat;

　　

• border-image-source：指定绘制边框的图像位置
• border-image-slice：图像边界向内偏移
• border-image-width：图像边界宽度
• border-image-outset：指定在边框外部绘制 border-image-area 的量
• border-image-repeat：用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded），默认值：stretch

• 3. box-shadow💡

  box-shadow属性用于设置盒子阴影，默认值none

  语法：

  box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow：设置水平阴影的位置（允许负值）*
  • v-shadow：设置垂直阴影的位置（允许负值）*
  • blur：阴影模糊距离
  • spread：阴影大小
  • color：阴影颜色
  • inset： 设置内侧阴影