css3(2)

垂直对齐

Paste_Image.png

1. 外层的div需要设置：display：table
2. 内容的div设置：
   （1）display：table-cell
   （2）vertical-align：middle

 <div id="content">
    <div id="wenzi">
        锄禾日当午，<br>
        汗滴禾下土。<br>
        谁知盘中餐，<br>
        粒粒皆辛苦。<br>
    </div>
  </div>

        #content {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: auto;
            display: table;
        }
        
        #wenzi {
            border: 1px solid red;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

圆角矩形

Paste_Image.png

        // 圆
        div:nth-of-type(5){
            border-radius: 50%;
        }
        // 扇形
        div:nth-of-type(6){
            border-radius: 0 0 200px;
        }
        // 圆形头像
        img {
            border-radius: 50%;
        }

阴影效果

Box-shadow：水平阴影，垂直阴影，羽化值，阴影大小，阴影颜色，阴影类别：内阴影，外阴影

e.g.：box-shadow: 3px 3px 3px 3px #666666;

内阴影.png

外阴影.png

<style>
        #con {
            width: 200px;height: 200px;
            border: 1px solid red;
            border-radius: 10px;
            box-shadow: 3px 3px 3px 3px #666666; // 默认是外阴影，加上inset是内阴影;
        }
</style>