css3(2)

垂直对齐

---

Paste_Image.png

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

 

    

        锄禾日当午，

        汗滴禾下土。

        谁知盘中餐，

        粒粒皆辛苦。

    
  

        #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