CSS3之border

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

桃花扇J

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

阅读量468

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105111715

版权

CSS3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本来是想把border和background写一块的，结果写着写着发现background内容太多，先发border吧

（1）border-image-source

（2）border-image-slice

（3）border-image-repeat

（4）borde-image-width：设置填充小方块的宽度

（5）border-image-outset：设置border-image在边框的位置

1.border-radius

border-radius这个属性在学习CSS2的时候也经常使用，现在对它进行拆分，先来做一个正方形如下，然后看看我们在CSS2中是怎么用的吧

（1）不做拆分

【例1】四角统一设置一个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 居中三件套 */
            position: absolute;
            left: calc(50% - 100px);
            top: calc(50% - 100px);
            border: 2px solid #000;
            /* 做圆 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

【结果】

【例2】设置两个参数

div {
    width: 100px;
    height: 100px;
    /* 居中三件套 */
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    border: 2px solid #000;
    /* 两个参数 */
    border-radius: 50px 30px;
}

【结果】左上与右下50px，右上与左下30px

【例3】设置三个参数

div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    border: 2px solid #000;
    border-radius: 50px 10px 20px;
}

【结果】左下与右上同为一个参数

【例4】设置4个参数

div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    border: 2px solid #000;
    border-radius: 10px 20px 30px 40px;
}

【结果】

（2）拆分

【例1】给每个角设置不同的值，该方法与传4个参数相同

div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    border: 2px solid #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

【结果】左上，右上，右下，左下的圆角像素分别为10px，20px，30px，40px

【例2】拆分后可各传两个参数，用左上角举例

div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    border: 2px solid #000;
    border-top-left-radius: 20px 20px;
}

先设置圆角为20px，使用控制台去改变参数值

【结果】可以看到第一个参数控制水平方向的弧度，第二个参数控制垂直方向的弧度

【总结】圆角相当于拿一个有弧度的图形去截直角，当水平与垂直方向的参数相同时，相当于去拿正圆截。

（3）大合并

将这八个参数同时写在border-radius中，如下

div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    border: 2px solid #000;
    border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}

【结果】由图可知，参数对应关系如下左上水平，右上水平，右下水平，左下水平 / 左上垂直，右上垂直，右下垂直，左下垂直

2.border-image

（1）border-image-source

该属性可控制边框由什么填充，可以是图片，也可以是渐变色等，需与slice配合使用，所以先讲完border-image-slice再举例

（2）border-image-slice

该图片，由线1，2，3，4分割成九块，除了第5个小方块，其他依次填充到边框的左上角，上中，右上角，右中，右下角，下中，左下角，左中，即将第五小块掏空，剩余部分作为边框，但是每一个小块都是独立的。

slice的属性值决定了如何切割该图片，最多传4个参数，4个参数依次为切割线3，2，4，1（上右下左）距离它最近边框的距离。例如，第二个参数为30px，第四个参数为20px时，则切割线2距离图片有边框的距离为30px，切割线1距离图片左边框的距离就为20px，即方块1的宽度为20px，方块3的宽度为30px，方块2的宽度是图片的宽减去方块1，3的宽度，然后按照border-image-repeat属性值的方式填充到上边框中间的位置。

【例】第一个方块边框填充渐变色，第二个方块边框填充图片(81px*81px)

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }
        .wrapper {
            position: absolute;
            top: calc(50% - 77px);
            left: calc(50% - 160px);
        }
        .wrapper div {
            float: left;
        }
        .demo1 {
            width: 100px;
            height: 100px;
            background-color: #eee;
            border: 27px solid #424242;
            border-image-source: linear-gradient(#fcc, #ccf);
            border-image-slice: 1;
            margin-right: 12px;
        }
        .demo2 {
            width: 100px;
            height: 100px;
            border: 27px solid #424242;
            border-image-source: url(./red.png);
            border-image-slice: 27 27 27 27;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
</body>

</html>

【结果】

【备注】图片如下

【注】slice属性值不带像素，自动加px，也可为百分值，4个参数也可以合并为1/2/3个参数

（3）border-image-repeat

该属性决定了截取出来的图片在边框上的填充方式，属性值介绍如下

stretch：拉伸，默认属性

【例】

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }
        div {
            position: absolute;
            top: calc(50% - 77px);
            left: calc(50% - 77px);
            width: 100px;
            height: 100px;
            border: 27px solid #424242;
            border-image-source: url(./red.png);
            border-image-slice: 27 27 27 27;
            border-image-repeat: stretch;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

【结果】

repeat：平铺，当所给宽度不是切割后的小方块的整数倍时，直接用不完整的小方块从两边开始填充

【例】修改border-image-repeat的属性值为repeat

【结果】在控制台增加div的宽度，可以看到repeat的平铺方式

round：平铺，当所给宽度不是切割后的小方块的整数倍时，拉伸/压缩后填充

【例】修改border-image-repeat的属性值为round

【结果】在控制台增加div的宽度，可以看到round的平铺方式

space：平铺， 当所给宽度不是切割后的小方块的整数倍时，用空白填充不足的部分

【例】修改border-image-repeat的属性值为space

【结果】在控制台增加div的宽度，可以看到space的平铺方式

（4）borde-image-width：设置填充小方块的宽度

【例】

（5）border-image-outset：设置border-image在边框的位置

【例】

桃花扇J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之border

本来是想把border和background写一块的，结果写着写着发现background内容太多，先发border吧属性这些东西，还是得自己动手试试看，挺好玩的，尤其是background的属性目录1.border-radius（1）不做拆分（2）拆分（3）大合并2.border-image（1）border-image-source（2）border-ima...
复制链接

扫一扫

专栏目录