说下border和background

# 3.border和background

 

- border-radius

    border-radius:上左 上右 下右 下左

    border-radius:上左下右 上右下左

    border-radius:上左 上右下左 下右 

 

    border-top-left-radius:10px 10px;

    border-top-right-radius:10px 10px;

    border-bottom-right-radius:10px 10px;

    border-bottom-left-radius:10px 10px;

 

    特殊写法：

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

    前面对应水平，后面对应垂直

 

- box-shadow

    给盒子加上阴影，分为inset内阴影和outset外阴影

 

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

    不写inset默认是outset

    阴影的水平偏移量：正右负左

    阴影的垂直偏移量：正下负上

    阴影的模糊值：基于原来边框的位置，向两边同时模糊的距离

    阴影的扩大:向四个方向同时扩大的距离

    阴影的颜色

 

    可以写多个：

    box-shadow:inset 0px 0px 10px #fff,

                3px 0px 10px #ff0,

                0px -3px 10px #f0f,

                -3px 0px 10px #0ff,

                0px 3px 10px #00f;

 

练习：

```html

<div></div>

 

<style>

*{

    margin:0;

    padding:0;

}

body{

    background-color:#000;

}

//第一种效果

div{

    position:absolute;

    left:calc(50% - 150px);

    top:calc(50% - 150px);

    width:300px;

    height:300px;

    border:1px solid #fff;

    border-radius:50%;

 

    box-shadow:inset 0px 0px 50px #fff,

                inset 10px 0px 80px #f0f,

                inset -10px 0px 80px #0ff,

                inset 10px 0px 300px #f0f,

                inset -10px 0px 300px #0ff,

                0px 0px 50px #fff,

                -10px 0px 80px #f0f,

                10px 0px 80px #0ff;

}

//第二种效果

div{

    position:absolute;

    left:calc(50% - 150px);

    top:calc(50% - 150px);

    width:300px;

    height:300px;

    border:1px solid #fff;

    border-radius:50%;

 

    box-shadow:0px 0px 100px 50px #fff,

                0px 0px 250px 125px #ff0;

}

//第三种效果

div{

    position:absolute;

    border-radius:5px;

    left:calc(50% - 50px);

    top:calc(50% - 50px);

    width:100px;

    height:100px;

    background-color:#fff;

 

    box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);

    transition:all .5s;

}

 

div::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    border-radius:5px;

    box-shadow:0px 5px 15px rgba(0, 0, 0, .3);

    opacity:0;

    transition:all .5s;

}

 

div:hover{

    transform:scale(1.25, 1);

}

 

div:hover::after{

    opacity:1;

}

</style>

```

 

- border-image

    //引入背景图片

    border-image-source:url();

    //支持渐变色

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

    border-image-slice:10 10 10 10;//只能填数字或百分比，顺序上右下左

    border-image-width:

    border-image-outset:

    border-image-repeat:stretch | round | repeat | space;

 

速写

border-image:source slice repeat;

```html

<style>

//边框渐变色

div{

    position:absolute;

    left:calc(50% - 50px);

    top:calc(50% - 50px);

    width:100px;

    height:100px;

    border:10px solid black;

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

    border-image-slice:10;

}

</style>

```

 

- background

    background-image:url(), url();//可以放多张背景图片

    background-size:100px 200px, 100px 200px;

    background-repeat:no-repeat;

    background-position:0 0, 100px 0;

 

    //下面两个一起使用

    background-origin:border-box | padding-box | content-box;//背景图片从哪里开始 边框盒 | 填充盒 | 内容盒

 

    background-clip::border-box | padding-box | content-box | text;//背景图片从哪里结束 边框盒 | 填充盒 | 内容盒 | 文字体部分

    //上面两个一起使用

```html

<style>

    div{

        position:absolute;

        left:calc(50% - 200px);

        top:100px;

        height:100px;

        line-height:100px;

        font-size:80px;

        width:400px;

 

        background-image:url();

 

        //下面两个属性配合使用，让背景图片填充到文字区域

        -webkit-background-clip:text;

        background-clip:text;

        background-text-fill-color:transparent;

        text-fill-color:transparent;

        //上面两个属性配合使用

    }

</style>

```

 

    background-attachment:scroll | local | fixed

    scroll相对于容器定位

    local相对于容器内容定位

    fixed相对于浏览器视口定位

```html

<style>

div{

    width:500px;

    height:700px;

    border:1px solid red;

    overflow:scroll;

    background-image:url();

    background-size:300px 400px;

    background-repeat:no-repeat;

    background-position:100px 100px;

 

    background-attachment:local;

}

</style>

```

 

    background-size: cover | contain

    cover:等比例缩放，会超出容器

    contain:被容器完整包含，等比例缩放，会留白

 

    background-repeat:no-repeat;是否重复出现

 

    background-image:linear-gradient(to right bottom, #0f0 20px, #ff0 60px, #00f 80px);

 

    background-image:radial-gradient(circle at 100px 0, #0f0 20px, green 40px, #0ff);