3.13 (案例) hsl-color
2017-06-07 本文已影响0人
柒月柒日晴7
hsl-color.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
height: 50px;
background-color: hsl(240,50%,30%);
}
.div2{
height: 50px;
background-color: hsla(120,100%,70%,0.7);
}
.div3{
height: 50px;
background-color: hsla(0,100%,70%,0.5);
}
</style>
</head>
<body>
hsl-color
ie9以下不兼容
色调：0(或360)红色,120绿色,240蓝色
饱和度:0% ~ 100%
亮度：0% ~ 100%
<div class="div1"></div>
<div class="div2"></div>
<!-- hsla-color -->
<!-- 色调：0(或360)红色,120绿色,240蓝色 -->
<!-- 饱和度:0% ~ 100% -->
<!-- 亮度：0% ~ 100% -->
<!-- 透明度: 0 ~ 1 -->
<div class="div3"></div>
</body>
</html>
