CSS3----盒模型新增樣式

阿新 • • 發佈：2021-07-13

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .test{
                width: 200px;
                height 
: 200px;
                background: #BBFFAA;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                text-align: center;
                line-height: 200px;
                
                box-shadow 
:inset 10px 10px 10px 0px black ;
            }
        </style>
    </head>
    <body>
        <!-- 盒模型陰影
                box-shadow-->
                <div class="test">
                    test
                </div>
    </body>
</html>

盒模型陰影　box-shadow和文字陰影一樣

語法　　

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow　　水平陰影位置

v-shadow　　垂直陰影位置

blur　　模糊距離

spread　　陰影尺寸

color　　陰影顏色

inset　　外部陰影改為內部陰影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /* img{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            } 圖片有自己的定位方式*/
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            img{
                width: 12.5rem;
                height: 12.5rem;
                vertical-align: middle;
                -webkit-box-reflect:right 0.625rem;
            }
        </style>
    </head>
    <body>
        <img src="../7.文字新增樣式/img/周冬雨.jpg" >
    </body>
</html>

倒影

　　-webkit-box-reflect: 屬性設定倒影

注意圖片位置排布

vertical-align　設定元素垂直對齊方式
　　　屬性值middle設定為居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            div{
                width: 12.5rem;
                height: 12.5rem;
                display: inline-block;
                background: #BBFFAA;
                overflow: auto;
                resize: both;
                
            }
            
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

resize不常用瞭解就好，

規定可以由使用者調整 div 元素的大小：

屬性值　　none 預設值 無法調整元素大小
　　　　　both 可以調整元素的高度和寬度
　　　　　horizontal 可以調整元素的寬度
　　　　　vertical 可以調整元素的高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                
                width: 200px;
                height: 200px;
                padding: 50px;
                background: #BBFFAA;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -100px 0 0 -100px;
                box-sizing: border-box;
            }
            
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>