CSS——知识点补充（三）默认样式、轮廓和阴影等样式

前言

本篇文章还是对CSS知识点的补充，主要讲解的内容是浏览器自带的默认样式，CSS的轮廓和阴影样式等知识。

一、浏览器的默认样式

实际上，即使我们没有在CSS中对元素进行样式的设定，浏览器在加载我们的页面元素时，还是会给我们的元素加上一些默认的样式。比如下面的示例：


    
    默认样式

浏览器的默认样式1

浏览器的默认样式2

至于为什么我们的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指的是内容区和内边距和边框的总大小）


    
    Box-Sizing属性的应用

box-sizing属性演示用例

三、元素的轮廓属性：outline

outline用来设置元素的轮鄏线。用法和border—模一样。轮廓和边框不同的点，就是轮廓不会影响到可见框的大小。

outline属性演示用例

四、阴影：box-shadow

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局。
box-shadow一共可以设置4个参数
第一个值水平偏移量，设置阴影的水平位置正值向右移动，负值相反方向移动
第二个值垂直偏移量，设置阴影的水平位置正值向下移动，负值相反方向移动
第三个值是阴影的模糊半径
第四个值阴影的颜色


    
    阴影

box-shadow属性演示

五、圆角：border-radius

border-radius:用来设置圆角的角度，这里由于之前的文章CSS——盒子模型和border-radius曾经讲过原理，所以这里的话就只进行演示：


    
    圆角

box-radius属性使用示例

另外，我们可以通过设置border-radius=50%来让矩形的元素变为圆形。
同时，我们还可以单独使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius这四个样式来设置某个角的弧度。