您的位置:首页> 前端教程> CSS3教程
文章导航

CSS HSLA()

2018-9-26 13:35| 作者: admin| 查看: 791| 评论: 0|来自: 蚂蚁部落

关于HSL()用法可以参阅CSS3 HSL()一章节。

HSLA()在HSL()基础上增加了一个透明度效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:300px;
  height:20px;
}
div.one { 
  background:hsla(320, 100%, 50%,0); 
}  
div.two { 
  background:hsla(320, 50%, 50%,0.2); 
}  
div.three { 
  background:hsla(320, 100%, 75%,0.4); 
}  
div.four { 
  background:hsla(202, 100%, 50%,0.6); 
}  
div.five { 
  background:hsla(202, 50%, 50%,0.8); 
}  
div.six { 
  background:hsla(202, 100%, 75%,1);  
}  
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS HSL()下一篇:CSS3 vmax

最新评论

返回顶部