【盒模型阴影&背景】12

盒模型阴影和背景

6.1 盒模型阴影

box-shadow:[inset] x y blur [spread] color,… (x、y、blur和color同文字阴影)

• [inset]：投影方式(默认为外投影，inset为内投影)
• [spread]：扩展阴影半径(先扩展原有形状，再开始画阴影)

div{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: brown;

    /* box-shadow: 10px -10px 5px black; */

    /* 嵌入阴影；内置阴影 */
    /* box-shadow: inset 10px 10px 5px black; */

    /* 20px: spread 扩张距离 */
    /* box-shadow: 10px 10px 5px  20px black; */
    box-shadow: 10px 10px 5px black, inset 10px 10px 5px black;

    /* inset 设置内置阴影 */
}

---

6.2 盒模型背景

1. 多背景：在一个background中设置多个背景，用逗号分开：background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

   div{
       width: 800px;
       height: 600px;
       margin: 100px auto;
       border: 1px black solid;
       
       /* 背景图片：前面覆盖后面 */
       background: url(../20200717/img/1.png) no-repeat 0 center,url(../20200717/img/2.png)no-repeat center top;
   
       background-size: 50% 50%, 30% 30%;
   }
   

2. 背景其他样式

   • background-size：背景尺寸，默认为图片大小，赋值为尺寸(像素)、百分比(相对于该元素宽高)或关键字(cover：覆盖；contain：包含)

     div{
         border: 100px solid rgba(0, 0, 0, 0.3);
         width: 800px;
         height: 500px;
     
         /* center center 图片居中 */
         background: url(../20200715/05-练习/img/昕昕子.jpg) no-repeat center center; 
     
         /* 设置背景图大小 */
         background-size: 300px 300px;
         background-size: 100% 100%;
     
         /* cover:等比例放大图片，直到最小变等于div的对应方向 */
         background-size: cover;
     
         /* contain: 等比例缩小图片; */
         /* background-size: contain; */
     }
     

   • background-origin：背景开始区域

     • border-box(背景图从边框开始渲染)
     • padding-box(默认值，背景图从填充开始渲染)
     • content-box(背景图从内容开始渲染)

             div{
                 border: 100px solid rgba(0, 0, 0, 0.3);
                 width: 800px;
                 height: 500px;
     
                 /* 设置背景图大小 */
                 background-size: 100% 100%;
     
                 /* 默认：照片起点为padding */
                 padding: 80px;
                 background: url(../20200715/05-练习/img/昕昕子.jpg);
                 background-origin: content-box; 
             }
     

   • background-clip：背景裁剪

     • borde-box(默认值，背景图将边框外裁剪)
     • padding-box(背景图将填充外裁剪)
     • content-box(背景图将内容外裁剪)
     • text(背景图将文字外裁剪)

     div{
         border: 100px solid rgba(0, 0, 0, 0.3);
         width: 800px;
         height: 500px;
         background-size: 100% 100%;
         padding: 80px;
         background: url(../20200715/05-练习/img/昕昕子.jpg);
         
         /* background-clip: content-box; */
         /* background-clip: border-box; */
          background-clip: padding-box; 
     }
     

     • 漂亮的特效

       div{
           border: 100px solid rgba(0, 0, 0, 0.3);
           width: 800px;
           height: 500px;
           background-size: 100% 100%;
           padding: 80px;
           background: url(../20200715/05-练习/img/昕昕子.jpg);
       
           /* 谷歌貌似不支持 */
           /* 适配： -webkit- */
           -webkit-background-clip: text;
       
           /* 设置透明色：tansparent */
           color: transparent;
       
           font-size: 200px;
       }