2018-12-4

---

border-radius

设置圆角。

image.png

        div{
            /* 正圆 */
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: aqua;
        }

image.png

 div{
            /* 设置圆角 */
            width: 200px;
            height: 200px;
            border-radius: 5px;
            background-color: aqua;
        }

---

box shadow

边框阴影。

image.png

     div.login{
            width: 340px;
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 150px;
            padding: 25px;
            /* 边框阴影 */
            box-shadow: 0 0 2px 2px rgba(0, 0, 0,0.1);
            border-radius: 5px;
        }

---

文档流

文档流就是浏览器在页面上摆放html的方法。从html文件的最上面开始，从上至下，从左至右，逐个显示所遇到的标签。
块元素的文档流

image.png

行内元素的文档流(如果浏览器一行显示不完，自动换到下一行显示)。

image.png