浏览器兼容性1—颜色(color属性)

最新推荐文章于 2023-07-03 15:20:50 发布

spfLinux

最新推荐文章于 2023-07-03 15:20:50 发布

阅读量945

点赞数

分类专栏：浏览器兼容性文章标签： CSS 浏览器兼容性 color

浏览器兼容性专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.colorname p {color:green;}
		.hex p {color:#ff0000;}
		.rgb p {color:rgb(0,0,0);}
		.rgba p {color:rgba(0,0,0,.5);}
		.hsl p {color:hsl(240,50%,50%);}
		.hsla p {color:hsla(240,50%,50%,.5);}
		.transparent p {color:transparent;}
	</style>
</head>
<body>
	<ul class="test">
		<li class="colorname">
			<strong>Color Name(用颜色名称表示法)</strong>
			<p>查看我的颜色 (color:green;)</p>
		</li>
		<li class="hex">
			<strong>HEX()十六进制数值表示法</strong>
			<p>查看我的颜色 {color:#ff00000}</p>
		</li>
		<li class="rgb">
			<strong>RGB</strong>
			<p>查看我的颜色 {color:rgb(0,0,0);}</p>
		</li>
		<li class="rgba">
			<strong>RGBA</strong> - IE8及以下浏览器不支持这种写法
			<p>查看我的颜色 {color:rba(0,0,0,.5)}</p>
		</li>
		<li class="hsl">
			<strong>HSL</strong> - IE8及以下浏览器不支持这种写法
			<p>查看我的颜色 {color:hsl(240,50%,50%);}</p>
		</li>
		<li class="hsla">
			<strong>HSLA</strong> - IE8及以下浏览器不支持这种写法
			<p>查看我的颜色 {color:hala(240,50%,50%, .5);}</p>
		</li>
		<li class="transparent">
			<strong>transparent</strong> -IE8及以下浏览器将文本颜色设置为transparent，文本将显示为黑色
			<p>看看我的颜色 {color:transparent;}</p>
		</li>
	</ul>
</body>
</html>

摘录于：《CSS参考手册》