一篇搞清CSS3边框新增的属性

2020-08-24 本文已影响0人深度剖析JavaScript

CSS3在边框上新增了一些属性，一起来看一下

1. box-shadow用于设置盒子的阴影
格式：box-shadow: 阴影类型 X轴偏移量 Y轴偏移量阴影边缘模糊阴影扩展半径阴影色彩

阴影类型：包括内阴影和外阴影，默认是外阴影，可以设置inset即可表示内阴影
X轴偏移量和Y轴偏移量：必填，用于表示阴影的位置，设置的值可正可负
阴影边缘模糊：默认为0，表示不模糊，模糊效果从阴影边缘向外扩展，只能是正值，模糊值越大，模糊的面积就越大，整体的阴影面积也会变大。
阴影扩展半径：即阴影大小，默认为0（不扩展），可以设置正负值，正值阴影延展扩大，负值阴影缩小。
阴影色彩：默认值为currentcolor

<head>
  <style>      
    div{
      width: 200px;
      height: 80px;
      background-color: pink;
      box-shadow:2px 5px 5px 0 deeppink; 
    }
  </style>
</head>
<body>
  <div></div>
</body>

结果

这里设置模糊半径为5px，如果设置为0，那就没有模糊的效果了。
一般经常设置的4个属性是：X轴偏移量、Y轴偏移量、模糊半径和颜色

2. border-radius 用于设置圆角边框
值：可以是长度或者百分比
值的格式：2个参数，参数间以/分隔；第 1 个参数表示水平半径或半轴，第 2 个参数表示垂直半径或半轴，如第 2 个参数值省略，则直接复制第 1 个参数值。
每个参数允许设置 1~4 个参数值；如果提供全部四个参数值，分别表示上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left；如果提供三个参数值，第一个表示top-left，第二个表示top-right和bottom-left，第三个表示bottom-right；如果提供两个参数值，第一个表示top-left和bottom-right，第二个表示top-right和bottom-left；如果只提供一个，将用于四个角
所以写全的话它的格式应该是
border-radius : 水平上左水平上右水平下右水平下左 / 垂直上左垂直上右垂直下右垂直下左
border-radius也可以拆分成border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius分别设置4个角。
但根据实际需求来设置，很多时候也不会设置那么多

<head>
  <style>      
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div></div>
</body>

结果

3. border-image 设置边框背景图像
border-image也是复合属性可以设置5个值：

border-image-source 设置图片来源，可以是图片路径也可以是渐变色

.test {
    border: 10px solid;
    border-image: linear-gradient(red, yellow) 10;
}

border-image-slice 用于设置图像从哪里分割
该属性指定从上，右，下，左 4 个方位来分割图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill
除fill关键字外，该属性接受1~4个参数值，如果提供全部四个参数值，将按上、右、下、左的顺序进行分割；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，上右下左都使用该值进行分割。

.demo {
    border-image-slice: 25% 30% 12% 20%;
}

border-image-width 边框背景图像的厚度
默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。还可以是百分比或者长度
border-image-outset 设置边框背景图像的外延尺寸
即是边框图像从边框边界向外偏移的距离
该属性接受1~4个参数值，如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时作用于四边。
厚度本身并不占据布局空间，所以不会影响布局
border-image-repeat 是否重复
取值：
stretch：拉伸填充边框图像区域
repeat：重复平铺填充边框图像区域。图像碰到边界时，超过的会被截断
round：与 repeat 类似。但当背景图像不能以整数次平铺时，会根据情况缩放图像
space：与 repeat 类似，但当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围

border-image-repeat可以接受1~2个参数值，如果提供两个参数，第一个用于水平方向，第二个用于垂直方向；只提供一个，则水平和垂直方向都应用该值。

一篇搞清CSS3边框新增的属性

猜你喜欢

热点阅读