css3-border

最新推荐文章于 2024-06-24 11:02:57 发布

云端的码农

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量160

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_43554231/article/details/104565136

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

border-radius

border-radius用于设置容器的圆角，就相当于是在容器的内部有一个圆在切割容器，当一个角的两个方向的值都相同时，这个圆的形状为正圆。设置其他不同值时，圆的形状也不同，切割出来容器的形状也不相同。
border-top-left-radius: 100px 100px;
第一个值代表水平方向的半径，第二个值代表数值方向的半径。

当border-radius的属性值书写形式有很多种：
border-radius: 50%;
设置4个角的圆角都一样大，此时容器的形状为圆形。内部切割圆的水平半径与数值半径都为容器宽度的一半。
border-radius: 10px 20px 30px 40px;
设置4个值分别代表左上、右上、左下、右下角的正圆的半径。
border-radius: 10px 20px 30px;
设置三个值为：按照顺时针顺序的切割容器的第一个角、第二个和第三个角、第四个角的正圆半径。
border-top-left:100px;
切割容器的左上角的圆的半径。
border-top-left: 100px 100px;
切割容器的圆的左上角的圆的水平方向的半径大小与述职方向的圆的半径大小。
border-radius: 10px 20px 30px 40px / 10px 20px30px 40px;
‘’/'前面表示容器的4个方向内部切割圆的水平方向的半径，后面表示圆的数值方向的半径。
当容器为正方形时，改变一条边的border-radius的值，当水平方向的半径与竖直方向的半径同时等于容器的宽度时，就可以画出四分之一个圆。

	width: 100px;
    height: 100px;
    border: 1px solid #000;
    position:absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    border-top-left-radius: 100px 100px;

半圆：长方形的容器可以画出半圆，将左上角的半径与左下角圆的半径都设为等同于容器的宽度或者高度。

    width: 200px;
    height: 100px;
    border: 1px solid #000;
    position:absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    border-top-left-radius: 100px 100px;
    border-top-right-radius: 100px 100px;

网页常见图形：

   width: 200px;
    height: 100px;
    border: 1px solid #000;
    position:absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    border-top-left-radius: 100px 100px;
    border-bottom-right-radius: 100px 100px;

树叶形状：

    width: 200px;
    height: 100px;
    border: 1px solid #000;
    position:absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    border-top-left-radius: 200px 100px;
    border-bottom-right-radius: 200px 100px;

box-shadow

box-shadow表示容器的阴影。

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

box-shadow 的第一个属性值表示水平方向的偏移量，第二个值表示竖直方向的偏移量，第三个值表示模糊值（blur），第四个值表示增大距离（speard），第五个值表示阴影的颜色。
在4个方向同时增加。
box-shadoaw 的属性值的第一个参数也可以为inset/outset, 表示是内阴影还是外阴影，如果不写默认为outset。

阴影的大小（blur）是基于边框的原来位置向边框两侧同时模糊。

内阴影：

    box-shadow: inset 0px 0px 1px 0px #fff;

box-shadow可以写多次：

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

先写的阴影会在逻辑的上面。

border-image

border-image:border-image-source| border-image-slice   | border-image-width   | border-image-outset   | border-image-repeat;

border-image-source:url();
border-image-source: linear-gradient(red, yellow);
border-image-source属性值可以为图片路径，也可以为渐变色
如果设置了border-image-source的值将会覆盖boder-color的样式。
border-image-slice: Number | 百分数;
border-image-slice的值为数字后面没有任何单位， 默认值为100%。

bordre-image-slice: 10 20 30 40 fill;
/*  代表4条分割线 
	将border-image-source的背景图或者渐变色用分割线分割成9个部分，将分割的结果（除了第9部分）		
	依次放入border的角落里
	第一个值为top值，表示背景图从上往下10px的距离为第一条分割线。
	第二个值为right值，表示背景图从右向左20px的距离为第二条分割线。
	第三个值为bottom的值，表示背景图从下到上有30px的距离为第三条分割线。
	第四个值为left的值，表示背景图从左到右40px的距离为第四条分割线。
	fill表示将内容区也填充
*/

border-image-ouutset: 10px;
/*
表示背景图向边框外面延伸10px，设置负值没有效果
*/

border-image-width: 1;
/*
默认值为1，表示倍数，1表示为是边框大小的1倍
也可以为带px单位的值
如果将值设置为auto，则这个属性的值为border-image-slice属性的值  加 ‘px’。
*/

border-image-repeat: stretch |round  |  repeat | space;
border-image-repeat：stretch round;
/*
默认值为stretch 
border-image-repeat最多可以有两个值第一个值表示水平方向的值，第二值表示垂直方向的值。
stretch ：将被分割的图像使用拉伸的方式来填充满边框图像区域。
repeat：将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。
round：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会根据情况缩放图像。
space：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。
*/