CSS3之border

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


目录

1.border-radius

(1)不做拆分

(2)拆分

(3)大合并

2.border-image

(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在边框的位置

【例】

 

发布了31 篇原创文章 · 获赞 4 · 访问量 1715
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览