CSS——知识点补充（三）默认样式、轮廓和阴影等样式
前言
本篇文章还是对CSS知识点的补充，主要讲解的内容是浏览器自带的默认样式，CSS的轮廓和阴影样式等知识。
一、浏览器的默认样式
实际上，即使我们没有在CSS中对元素进行样式的设定，浏览器在加载我们的页面元素时，还是会给我们的元素加上一些默认的样式。比如下面的示例：
<head>
<meta charset="UTF-8">
<title>默认样式</title>
<style>
#root{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
至于为什么我们的div元素没有贴紧窗口，是因为浏览器给body的margin加上了默认8px的距离。实际上浏览器不仅仅是会对body标签加上样式，对于li、a标签等都有默认的样式，而且不同的浏览器对于这些标签所给定的默认样式还不一定相同。对于这种情况，为了开发出来的页面能够具备更好的兼容性，一般来说我们会在开发之前，先对浏览器给的样式来做一下统一的清除。网上有很多针对清除浏览器默认样式的CSS文件，这里的话推荐下面这份文件：
https://meyerweb.com/eric/tools/css/reset/ ，有需要可以自行下载
二、box-sizing属性的使用
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定，box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
| 可选值 | 效果 |
|---|---|
| content-box | 默认值,宽度和高度用来设置内容区的大小 |
| border-box | 宽度和高度用来设置整个盒子可见框的大小（width和 height指的是内容区和内边距和边框的总大小） |
<head>
<meta charset="UTF-8">
<title>Box-Sizing属性的应用</title>
<style>
#root{
box-sizing: border-box;
width: 200px;
height: 200px;
border: plum solid 20px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
三、元素的轮廓属性：outline
outline用来设置元素的轮鄏线。用法和border—模一样。轮廓和边框不同的点，就是轮廓不会影响到可见框的大小。
<head>
<meta charset="UTF-8">
<title>轮廓</title>
<style>
#root1{
width: 200px;
height: 200px;
background-color: orange;
border: skyblue solid 10px;
}
#root1:hover{
outline: solid red 10px;
}
</style>
</head>
<body>
<div id="root1"></div>
aa
</body>
四、阴影：box-shadow
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局。
box-shadow一共可以设置4个参数
第一个值水平偏移量，设置阴影的水平位置正值向右移动，负值相反方向移动
第二个值垂直偏移量，设置阴影的水平位置正值向下移动，负值相反方向移动
第三个值是阴影的模糊半径
第四个值阴影的颜色
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
#root{
width: 200px;
height: 200px;
border:steelblue 10px solid;
/* 设置阴影 */
box-shadow: 20px 20px 10px tomato;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
五、圆角：border-radius
border-radius:用来设置圆角的角度，这里由于之前的文章CSS——盒子模型和border-radius曾经讲过原理，所以这里的话就只进行演示：
<head>
<meta charset="UTF-8">
<title>圆角</title>
<style>
#root{
width: 200px;
height: 200px;
border:10px turquoise solid;
/* 设置圆角 */
border-radius: 50%;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
另外，我们可以通过设置border-radius=50%来让矩形的元素变为圆形。
同时，我们还可以单独使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius这四个样式来设置某个角的弧度。
