0


Border of CSS3

这里写目录标题

Border of CSS3

border-radius

image-20220116093342553

border-radius: 10px 20px 30px;

image-20220115163933649

border-radius: 10px 20px;

image-20220115164038002

border-radius: 10px;

image-20220115164133375

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

image-20220115163136457

展开写如下:

border-top-left-radius:10px 10px;border-top-right-radius:20px 20px;border-bottom-right-radius:30px 30px;border-bottom-right-radius:40px 40px;

两个数值分别为圆角的水平半径和垂直半径

所以还有一种写法:

border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;

box-shadow

image-20220116093402914

box-shadow的第一个属性值是inset,是向内的阴影,如果不写,则默认是向外的阴影,下面是方块的初始状态:

box-shadow: 0px 0px 0px 0px #0ff;

image-20220116084815993

现在先给前两个值增加10像素:

box-shadow: 10px 10px 0px 0px #0ff;

image-20220116085219047

第一个值代表水平偏移量,第二个值代表垂直偏移量,如果为负值则向反方向移动。

现在给第四个值增加10像素:

box-shadow: 0px 0px 0px 10px #0ff;

image-20220116085607167

第四个值是阴影的水平和垂直方向同时加10像素。

现在将阴影移出来,并且第三个值增加50像素:

box-shadow: 100px 010px 50px 0px #0ff;

image-20220116090223795

所以第三个值是基于边框的位置,向两边同时模糊。

但是box-shadow最好玩的地方是它理论上可以设置无数个值:

box-shadow: inset 0px 0px 10px 0px#fff,
                3px 0px 10px 0px #f0f,
                0px -3px 10px 0px #0ff,
                -3px 0px 10px 0px #00f,
                0px 3px 10px 0px #ff0,
                0px 3px 10px 0px #ff0;

image-20220116093607177

它这里实际上有一个Z轴,越靠前的值在上层,如果两组值一样的话,则会有一个加重的效果。

然后用这个方法写两个小demo:

box-shadow: inset 0px 0px 50px #fff,
                inset 15px 0px 80px #f0f,
                inset -15px 0px 80px #0ff,
                inset 15px 0px 100px #f0f,
                inset -15px 0px 100px #0ff,
                0px 0px 50px #fff,
                -15px 0px 50px #f0f,
                15px 0px 50px #0ff;

image-20220116100138575

box-shadow: 0px 0px 100px 50px #fff,
            0px 0px 100px 60px #fff,
            0px 0px 250px 125px #ff0;

image-20220116100623763

border-image

border-image-source

它可以引入一张背景图片来填充:

border-image-source:url()

也可以支持渐变色:

border-image-source:linear-gradient(red, yellow);border-image-slice: 10;

image-20220116111213679

border-image-slice

image-20220116102403100

slice可以传四个值,就是图中四条分割线距离边框的距离,四个值依次是top、right、bottom、left,分割成9个部分,除了中间那部分,剩下的8个部分会填充到border的边框中。

现在用下面这张300px×300px的图片辅助学习slice的相关属性

image-20220116112853363

border: 100px solid black;border-image-slice: 100;

image-20220116113915613

当然这里也可以填百分数33.3%,但是效果总归不会有填100好。

如果没有这个slice值,则默认为100%,就会出现下面的情况:

image-20220116114959839

slice还有一个一般不会用的值fill,这个fill会让背景图片向内填充。

注意:在实验过程中,偶然发现border-image-source和border-image-slice必须两行挨在一起,中间不能有其他属性。

border-image-outset

这个属性可以让背景图片向外延申:

border-image-slice: 100;border-image-outset: 100px;

image-20220116115715262

这样就会延申到div外面去,不可以填负值,负值没有用。

border-image-width

默认值是1,1是1倍的意思,但是一般是不会去动这个值的。

如果值是auto的话,则是取slice的值,并且加一个像素px。

border-image-repeat

如果div变大以后,会有下面四种填充方式;

stretch

image-20220116120813666

stretch会以拉伸的方式填充,这也是border-image-repeat属性的默认值。

repeat

image-20220116120839706

repeat将中间的部分按原比例切开进行填充。

round

image-20220116120947900

round会将中间的部分进行拉伸或者压缩进行填充,会一直保持着中间是菱形或者正方形。

space

image-20220116120915290

space当中间的间隔不够放下一整个正方形的时候,会用空白进行填充。

border-image是可以合在一起写的,格式是:

border-image:source slice repeat;
标签: css3 css 前端

本文转载自: https://blog.csdn.net/weixin_53647158/article/details/122521556
版权归原作者 丶Zero丶 所有, 如有侵权,请联系我们删除。

“Border of CSS3”的评论:

还没有评论