上一次我们给大家介绍了css的各种选择器，这次我们来介绍css的三大属性和选择器的权重。

一、css三大特性

01、层叠性（覆盖性）

一个标签的同一个属性被多次重复设置，最后设置的一次会生效，其他的都会被层叠覆盖；

遵循了就原则；

    .box {
        width: 300px;
        height: 300px;
        background-color: royalblue;
        width: 100px;
    }

以上代码盒子的宽度最终大小为100px，将最前面的300px覆盖掉了；

02、继承性

有一些css属性子级元素或继承父级元素的样式，不需要单独设置，控制文字的相关属性（text-，font-，line-，color）几乎都可以被继承；

注意：01、超链接a元素不会继承父级盒子的color颜色和text-decoration，因为浏览器默认给a设置默认的颜色样式，我们需要单独设置a的color颜色和text-decoration；

02、标题标签h1,h2,h3,h5,h6不会直接继承父级盒子的文字大小font-size，因为他们本身自己有默认的文字大小并且是em相对单位，我们得到的结果是我们设置父级文字大小乘以这个倍数；所以我们需要单独设置；

03、权重优先级

不同的选择选择元素的时候权重大小不同，我们以基础选择器为参照，计算出我们自己选择器权重大小；

基本计算

01、继承性是没有权重的，如果当前元素自己有样式，就不会继承父级的样式，所以继承性的权重为0；

02、标签选择器，伪元素，的权重为1 （0,0,0,1）

03、类选择器，伪类选择器，属性选择器，的权重为10 （0,0,1,0）

04、id选择器的权重为100 （0,1,0,0）

05、行内元素的权重为1000 （1,0,0,0）

06、可以给样式设置!important 提高权重 ，权重是无限大；

权重叠加

实际开发中我们往往是按照复合选择器书写样式，所以我们就会将一些权重进行叠加计算,比如以下代码就可以计算出不同的权重值；

     .box li a {
         color: red;
     }
     .box li a:hover {
        color: salmon;
     }

.box li a 的权重值 = 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2 = 12

.box li a:hover的权重值 = 0,0,1,0 + 0,0,0,1 + 0,0,0,1 + 0,0,1,0 = 0,0,2,2 = 2

注意:权重叠加是不会有进位的，每一类基础选择器只能在自己的位置叠加，如果超过10也不能向前进位哦；相当于现实辈分和年龄是不能对比的；

总结如下

同一个标签，携带了多个类名，有冲突：

这里需要补充两种冲突的情况：

• 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。
• 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

!important标记：优先级最高

来给一个属性提高权重。这个属性的权重就是无穷大。!important无法提升继承的权重，该是0还是0

   

圆角border-radius

圆角矩形

border-radius取值为一个实际像素

        .box {
            width: 300px;
            height: 100px;
            background-color: #f00;
            border-radius: 15px;
        }

圆形

矩形必须是正方形，设置border-radius*取值大于等于高度一半或者直接设置50%

        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* border-radius: 50px; */
            border-radius: 50%;
        }

胶囊形状

矩形必须是长方形，设置border-radius*取值大于等于高度一半；

        .box {
            width: 300px;
            height: 50px;
            background-color: #f00;
            border-radius: 25px;
        }

如果设置border-radius*取值为50%，会绘制椭圆

        .box {
            width: 300px;
            height: 50px;
            background-color: #f00;
            border-radius: 50%;
        }

半圆

设置border-radius*取值个数为4个值：分别是：左上角 右上角 右下角 左下角

语法：border-radius：左上角 右上角 右下角 左下角；

        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            border-radius: 0 50px 50px 0;
        }
​
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #f00;
            border-radius: 50px 0 0 50px;
        }

盒子阴影box-shadow

语法

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow:水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/外阴影；

水平阴影： 阴影在盒子的水平方向左右的位置设置； 垂直阴影： 阴影在盒子的垂直方向上下的位置设置； 模糊距离： 阴影的羽化模糊的程度，值越大越模糊； 阴影大小： 设置阴影的大小尺寸，一般可以不设置，有了需求在设置； 阴影颜色： 阴影的颜色显示； 内/ 外阴影：阴影在盒子的内部显示还是外部显示，默认不设置是外部阴影，我们不需要设置outset，设置了就出 问题，想要设置内阴影就设置取值为inset；

注意：一个盒子可以加多个阴影，用个英文的逗号隔开即可

box-shadow: 5px 5px 10px #000, 20px 20px 10px red;

文字阴影

语法

    text-shadow: h-shadow v-shadow blur color;
    text-shadow:水平阴影   垂直阴影   模糊距离   阴影颜色 ；

参数和盒子阴影差不多；

这次给大家介绍了三大属性和边框圆角的应用，下期给大家介绍盒模型的布局。