我正在寻找最时髦的方法来减少 HTML 语义(css 可以根据需要很大)这个 4 色徽标不使用图片,任何结构都可以改变。唯一的要求是它可以在 IE8 中运行。我正在使用 selectivr 和 modernizr 所以大多数选择器类等应该可以工作。此外,我使用的 CSS 较少,所以如果你也可以这样写。
<ul class="logo">
<li class="webBG"></li>
<li class="designBG"></li>
<li class="videoBG"></li>
<li class="audioBG"></li>
</ul>
CSS
ul.logo{margin: 0 0 0 10px;padding: 0;list-style-type: none;}
ul.logo li{display: inline-block; width:5px;height:5px; padding:0;margin:0; float:left;}
.designBG{background:#00c8e8}
.videoBG{background:#33cc77}
.webBG{background:#ec8544}
.audioBG{background:#E58}
更新最终解决方案
#boilerplate > div{
margin-left:10px;
width:20px;
height:5px;
/*cross browser definitions follow..*/
background-image: -o-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -moz-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -webkit-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -ms-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
}</p>
HTML
<div></div>