3.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);   以上是markdown格式的笔记

原文链接:https://www.cnblogs.com/lanshanxiao/p/12912693.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有