【矩形剪切inset()】
接收4个长度参数，类似相对定位时指定的top、right、bottom、right
即剪切的矩形边缘与元素边缘的距离
【圆形剪切circle()】
接收2个长度参数，第1个参数表示圆的半径，第2个参数表示圆心所在的位置
第2个参数以单位at开头，可选的，默认情况下圆心位于元素的中点，即元素水平平分线和垂直平分线的交点
【椭圆形剪切ellipse()】
接收3个参数，分别是椭圆的水平半径、垂直半径和圆心位置
多边形剪切polygon()
参数值是做生意多的坐标值，坐标相对于元素左上角定位，各坐标之间用逗号分隔
滤镜
【透明度滤镜opacity()】
从0到1之间的数值，0表示完全透明，1表示不透明
【模糊滤镜blur()】
接收的参数是一个长度值，表示模糊半径
对整个元素进行模糊处理
【色相滤镜hue-rotate()】
接收一个角度值作为参数，它的含义是将色相环旋转多少度，此值可正可负，正值表示沿色相环顺时间方向寻找色值，负值则表示沿色相环逆时针方向寻找色值
【亮度滤镜brightness()】
接收一个数值或百分比值作为参数，表示相对于当前的亮度（当前亮度为1或100%）的变化程度
若值大于1，则元素变得更亮
若值小于1，则元素变得更暗
【对比度滤镜contrast()】
接收一个数值或百分比值作为参数，表示相对于当前的对比度（当前对比度为1或100%）的变化程度
若值大于1，则元素对比度变得更高
若值小于1，则元素对比度变得更低
对比度是元素黑与白的比值，比值越大，亮色就向白色靠拢，暗色就向黑色靠拢
比值越小，黑色和白色都向灰色靠拢
【多重滤镜filter属性】
同时应用多个滤镜，多个函数之间用空格分隔
颜色混合模式mix-blend-mode
用于将两个图层的颜色融合在一起，混合的模式一共有16种
multiply模式：
类似于用染料绘画的效果
如果合成的图层之一是白色，则合成色为另一个图层的颜色
如果合成的图层之一是黑色，则合成色为黑色
screen模式：
类似于把多束光影投影到屏幕上的效果，如舞台上灯光的混合效果
图层合成之后的颜色通常比参与合成的颜色要亮
如果合成的图层之一是白色，则合成色为白色
如果合成的图层之一是黑色，则合成色为另一个图层的颜色
difference模式：
一个图层的白色部分会合成为另一个图层的反色
黑色部分则保留另一个图层本身的颜色
color-dodge模式：
一个图层的白色部分会加亮另一个图层
黑色部分合成为另一个图层本身的颜色
/*莲花*/
/*设置背景色，并令容器居中*/
body{
margin:0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightyellow;
}
/*设置容器尺寸，画辅助线*/
.lotus{
width: 20em;
height: 11.5em;
outline:1px dashed black;
position: relative;
}
/*绘制花瓣，黄色、细长的椭圆形，并用深灰色描边*/
.lotus div{
position: absolute;
box-sizing: border-box;
width: 10em;
height: 3em;
border:0.2em solid dimgray;
border-radius: 50%;
background-color: hsl(60, 100%, 50%);
}
/*旋转原点*/
.lotus div{
transform-origin: right;
}
.lotus div:nth-child(2){transform: rotate(20deg);}
.lotus div:nth-child(3){transform: rotate(40deg);}
.lotus div:nth-child(4){transform: rotate(60deg);}
.lotus div:nth-child(5){transform: rotate(80deg);}
.lotus div:nth-child(6){transform: rotate(100deg);}
.lotus div:nth-child(7){transform: rotate(120deg);}
.lotus div:nth-child(8){transform: rotate(140deg);}
.lotus div:nth-child(9){transform: rotate(160deg);}
.lotus div:nth-child(10){transform: rotate(180deg);}
/*调整位置*/
.lotus div{top:calc((20em - 3em)/2)}
/*上色*/
.lotus div:nth-child(2){filter: hue-rotate(30deg);}
.lotus div:nth-child(3){filter: hue-rotate(60deg);}
.lotus div:nth-child(4){filter: hue-rotate(90deg);}
.lotus div:nth-child(5){filter: hue-rotate(120deg);}
.lotus div:nth-child(6){filter: hue-rotate(150deg);}
.lotus div:nth-child(7){filter: hue-rotate(180deg);}
.lotus div:nth-child(8){filter: hue-rotate(210deg);}
.lotus div:nth-child(9){filter: hue-rotate(240deg);}
.lotus div:nth-child(10){filter: hue-rotate(270deg);}
/*加阴影*/
.lotus div{
box-shadow: 0 0 1em hsla(0, 0%, 0%, 0.5);
}
摘自《css3艺术》
网友评论