css3边框线border

拼搏现实的明天。 2023-06-25 06:24 35阅读 0赞

### 边框（border） ###

在网页中我们最常见的一种css3样式莫过于边框圆角了，边框圆角是的网页整体更加美观，我们当然想要我们的页面更加的美观，所以我们一起来看看这个属性。

border-radius: 5px;

![在这里插入图片描述][20191226194350177.png_pic_left]  
我们设置边框圆角值为5px，如上图所示，当然这个只是一个简写的方法

border-radius: 5px 10px;

![在这里插入图片描述][20191226195017570.png_pic_left]  
这样的写法就是代表着左上和右下为5px，右上和左下的为10px，当然这样还是简写，再次还原看看

border-radius: 5px 10px 20px 30px;

![在这里插入图片描述][20191226195859865.png_pic_left]  
这样的写法分别设置了四个角的不同的弧度，也可以分开设置每个小的弧度。

border-top-left-radius：5px
    	左上角的边框圆角
    	border-top-right-radius：5px
    	右上角的边框圆角
    	border-bottom-left-radius：5px
    	左下角的边框圆角
    	border-bottom-right-radius：5px
    	右下角的边框圆角

最原始的写法

border-radius：10px 20px 30px 40px / 20px 20px 30px 40px

此时四个角的边框圆角分别为：10px,20px 20px,20px 30px,30px 40px,40px

### 边框阴影（box-shadow） ###

//box-shadow: h v blur spread color;
    box-shadow: inset 3px 3px 5px 0px #000;

**spread**:阴影外延值 正值四周放大 负值四周收缩  
**blur**：以当前阴影的边框进行内外模糊不写就是outset，

> • inset 内阴影  
> • outset 外阴影；默认值不设置，设置后失效。  
> • 可以设置多层阴影

### 边框图片（border-image） ###

border-image-source
    设置边框图片路径
    border-iamge-slice
    设置边框图片切割的位置
    border-image-slice: 25% 30% 12% 20% fill;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]

> 图中1，2，3，4所切割出来的图像分别对应着元素的四个角；5，6，7，8所切割的图像分别对应着四个方向的border；fill关键字非必填，填写则代表元素的content的背景图像为被切割的9。

#### 设置图片平铺的效果（border-image-repeat） ####

**stretch**：拉伸  
**round**：环绕式拉伸  
**repeat**：平铺 不会拉伸背景图，见缝插针  
**space**：平铺 不会拉伸图片，使用空白位置代替

###### 复合语法 ######

// border-iamge：source slice repeat
    border-image: url(image.png) 100 round;

[20191226194350177.png_pic_left]: https://img-blog.csdnimg.cn/20191226194350177.png#pic_left
[20191226195017570.png_pic_left]: https://img-blog.csdnimg.cn/20191226195017570.png#pic_left
[20191226195859865.png_pic_left]: https://img-blog.csdnimg.cn/20191226195859865.png#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226202315134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70