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

最新推荐文章于 2025-10-28 18:03:24 发布

原创最新推荐文章于 2025-10-28 18:03:24 发布 · 353 阅读

CC 4.0 BY-SA版权

博客聚焦CSS考点，介绍了圆角样式，包括四个角不同角度的设置；阐述了rgba颜色表示法，它与rgb用法相似，多了控制透明度的a参数，且与opacity对颜色控制有区别；还讲解了css样式权重值，多个选择器操作同一标签时，样式依权重呈现，以及important的使用。

考点

设置四个角为圆角
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>