1. 圆角边框（重点）
正方形变为圆形：
将border-radius设置为正方形的一半或者设置为50%即可
矩形变为圆角矩形
将border-radius设置为矩形高度的一半，宽度不用设置
2. 盒子阴影
注意：书写时当项目需要内阴影时使用inset，项目使用外阴影时不需要书写，默认为外阴影，如果写上outset则效果不展示
如果我们想要的效果是鼠标放到盒子上时才会出现影子，可以使用hover的方式。
div:hover { box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3); }
3. 文字阴影
4. CSS浮动（可以让多个块级元素在一行内排列使用）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>演示案例</title> <style> .left { float: left; width: 100px; height: 100px; background-color: blue; } .right { float: right; width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div class="left">张三</div> <div class="right">王五</div> </body> </html>
4.1 浮动的特性（重难点）
注意：行内元素设置宽和高是没有用的，但是设置为浮动以后就可以显示了。
注意：设置浮动以后，不再需要将行内元素转换为行内块元素进行使用
网页布局：通常我们在设置网页布局的时候，将标准流和浮动搭配使用
例如上图：一个标准流大盒子中放四个浮动的盒子
综合案例：小米官网（一个标准流两个浮动）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动元素搭配标准流父盒子1</title> <style> .box { width: 1200px; height: 460px; background-color: pink; margin: 0 auto; } .left { float: left; width: 230px; height: 460px; background-color: purple; } .right { float: left; width: 970px; height: 460px; background-color: skyblue; } </style> </head> <body> <div class="box"> <div class="left">左侧</div> <div class="right">右侧</div> </div> </body> </html>
