css新增属性之边框

css3新增属性

• 边框属性
• 背景属性
• 文字属性
• 颜色属性

边框属性

属性	说明
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：单独设置右下角圆角

复合属性写法：

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

例：

div{
    background-color: pink;
    width: 300px;
    height: 300px;
    border-radius: 20px;/* 一个值 */
    border-radius: 20px 60px; /* 两个值 */
    border-radius: 10px 30px 50px; /* 三个值 */
    border-radius: 10px 20px 30px 40px;/* 四个值 */
}

注意：当盒子宽高相同时，设置border-radius:50%是圆形；当宽高不等则是椭圆形


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

例：

div{
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    /* 复合样式 */
    border-image:url(border.png) 30 30 round;
    /* 分样式 */
    border-image-source: url(border.png);/* 指定要使用的图像 */
    border-image-slice: 50% 50%;/* 指定图像的边界向内偏移 */
    border-image-width: 1;/* 指定图像边界的宽度，默认值1 */
    border-image-outset: 30 30;/* 没有单位 */
    border-image-repeat: repeat;/* 设置平铺repeat，默认拉伸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： 设置内侧阴影

例：

div{
    width: 200px;
    height: 200px;
    background-color: #eee;
    box-shadow: ;
    box-shadow: 0px 0px 10px 1px red inset;
}

参考链接：https://www.w3cschool.cn/css3/css3-borders.html