CSS 样式表现

透明度控制属性

opacity 属性可以让元素表现为半透明,属性计算值的范围是 0~1.没有继承性.在所以支持的 CSS 过度动画和 CSS 属性中,opacity 属性的性价比是最高的.

opacity 属性的叠加计算规则

由于 opacity 属性没有继承性,因此父子元素同时设置半透明时,半透明效果是叠加的

opacity 属性的边界特性

opacity 属性有一个实用边界特性,即 opacity 属性设置的数值大小如果超过 0~1 方位,最终的计算值属性会按照以下规则转换成边界值

<0 的值解析为 0,即完全透明
>1 解析为 1,完全不透明

实例:利用这个属性设置一个静态的饼图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .pie-simple {
                width: 128px;
                height: 128px;
                border-radius: 50%;
                overflow: hidden;
                background-color: #006400;
            }

            .pie-left,
            .pie-right {
                width: 50%;
                height: 100%;
                float: left;
                position: relative;
                overflow: hidden;
            }

            .pie-left::before,
            .pie-right::before,
            .pie-right::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: deepskyblue;
            }

            .pie-left::before {
                left: 100%;
                transform-origin: left;
                transform: rotate(calc(3.6deg *(var(--percent) - 50)));
                opacity: calc(99999*(var(--percent) - 50));
            }

            .pie-right::before {
                right: 100%;
                transform-origin: right;
                transform: rotate(calc(3.6deg *var(--percent)));
            }

            .pie-right::after {
                opacity: calc(99999*(var(--percent) - 50));
            }
        </style>
    </head>
    <body>
        <div class="pie-simple" style="--percent:70">
            <div class="pie-left"></div>
            <div class="pie-right"></div>
        </div>
    </body>
</html>

圆角属性 border-radius

border-radius 属性是 border-top-left-radius,border-top-right-radius,border-bottom-left-radius border-bottom-right-radius这四个属性的缩写

1~4 个值表示方位

如果只有一个值,则表示圆角效果作用在全部 4 个角上
如果只有两个值,第一个值作用在左上角和右下角,第二个值作用右上角和左下角
如果是三个值,第一个值表示左上角,第二个值表示右上角和左下角,第三个值表示右下角
如果是四个值分表表示左上角右上角右下角左下角

水平半径和垂直半径
我们使用的圆角其实也是一种缩写,其实他拥有二个值,分别表示水平半径和垂直半径,如果只设置一个值,则表示水平半径个垂直半径一致
圆角如何产生的
虽然border-radius 为圆角属性,实际上 border-radius 属性的字面量不是圆角,而是半径,也就是说圆角效果以这个半径的圆或者半轴值绘制椭圆

box-shadow 盒阴影

box-shadow 盒阴影非常常用的属性,可以给元素设置阴影效果.第一个值表示水平偏移,第二个属性表示垂直偏移,第三个属性表示模糊大小,第四个属性表示阴影颜色

inset 关键字与内阴影
box-shadow属性支持 inset 关键字,表示阴影朝向元素内部.可以使用 inset 属性来模拟边框.box-shadow属性支持无限多个阴影效果不断累加,因此理论上 box-shadow 属性可以实现任意图形效果