透明度控制属性
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 属性可以实现任意图形效果
网友评论