5+个你可能没有见过的CSS3技巧

by

从CSS3开始，CSS的语法变得越来越灵活多变，以至于有些用法令人拍案叫绝。

本文的全部代码均来自http://updates.html5rocks.com/2012/06/The-amazing-powers-of-CSS，如果您对其中的任何技术细节存在疑问，请以原文为准。

下面的代码能够将空链接显示为非常显著的红底白字：

a[href = ""] {
  background: red;
  color: white;
  font-size: x-large;
}

样例：http://jsfiddle.net/VWYsk/

这样可以突出显示绝对链接：

a[href ^= http] {
  display: inline-block;
  color: red;
  transform: rotate(180deg);
}

样例：http://jsfiddle.net/RShhf/1/

给自己的内部链接一点特色：

a[href ^= 'http']:not([href *= 'newhtml.']) {
  background: transparent url(arrow.png) no-repeat center right;
  padding-right: 16px;
}

样例：http://jsfiddle.net/Sts9H/1/

反转所有png图片：

img[src $= .png] {
  filter: invert(100%);
}

除此之外，你还可以做更多有意思的，比如让head元素和其它元素一样可见：

head {
  display: block;
  border-bottom: 5px solid red;
}
script, style, link {
  display: block;
  white-space: pre;
  font-family: monospace;
}

有没有想过CSS也可以携带脚本？

script:before {
  content: “”;
}



	

style:before { content: “