css-样式的权重-圆角-rgba

考点

设置四个角为圆角
border-radius:半径

分别设置四个角的弧度，写出格式
border-radius:30px 40px 50px 60px;

设置右下角的弧度为30px
border-bottom-right-radius: 30px;
border-Y轴位置单词-X轴位置单词-radius：半径

设置一个红色背景颜色，透明度为六成透明
background-color: rgba(255,0,0,0.6)


css的权重，请列出一万分，一千分，一百分，十分，一分这些权重分值所以应的样式
10000，!important
1000，内联样式
100，ID选择器
10，类与伪类选择器
1，标签选择器
0，其它选择器

圆角

样式

设置四个角的
border-radius: 半径

单独的设置每一个角的弧度
border-Y轴位置英文-X轴位置英文-radius:半径

补充

四个角不一样的角度

代码

<style>
    
    div{
        width: 300px;
        height: 300px;
        background-color: red;
        border-radius:150px;
    }
</style>


<div></div>

代码

<style>
    
    div{
        width: 300px;
        height: 300px;
        background-color: red;
        border-bottom-right-radius:150px;
    }
</style>


<div></div>

rgba-颜色表示法

用法

样式
background-color: rgba(100,200,100,0.6)

rgba，与rgb同法相同

多一个a参数，控制颜色的透明度

rgba 对颜色的控制 与 opacity对颜色的控制

区别

rgba只对颜色的透明度产生效果

opacity对整个标签产生效果

css样式的权重值

权重

权-权力

重-比重

现象，多个选择器操作同一个标签，样式只有一个出现

<style>

    .box{
        background-color: blue;
    }

    div{
        width: 300px;
        height: 300px;
        background-color: red;
    }

    #outter{
        background-color: yellow;
    }

/*军师旅团营连排*/
/*小兵*/

</style>


<div class="box" id="outter" style="background-color: green"></div>

具体出现哪一个样式

要看选择器对应的权重

important的使用

<style>

    .box{
        background-color: blue;
    }

    div{
        width: 300px;
        height: 300px;
        background-color: red !important;;
    }
    /*1+10000*/

    #outter{
        background-color: yellow !important;
    }
    /*100+10000*/
    
    

/*军师旅团营连排*/
/*小兵*/

</style>

<div class="wrapper">
    <div class="box" id="outter" style="background-color: green"></div>
</div>