标签 css3 下的文章

CSS渐变,终结篇

你常用CSS渐变吗?

如果回答是不,那么很可能是被它复杂的语法吓到了,且不说不同浏览器,即使是很赶时髦的Chrome,也经历了3个阶段,好在目前渐变规范进入了w3c草案,慢慢地终于“稳定”了下来。为避免混淆,本文只使用最新的语法。

题目叫终结篇,意思是看完这篇文章就不再纠结了。

什么是渐变

渐变本质是一种image,所以应该是background-image而不是background-color的值。渐变大体分两种,线性linear和径向radial,还有重复渐变是这两种渐变的特殊形式。

线性渐变linear-gradient

基本语法:

background-image: linear-gradient(red, yellow);

linear-gradient

- 阅读剩余部分 -

CSS 选择器之 > + ~

PS:标题没有乱码 :)

>选择器

div > a

选取父元素是 <div> 元素的每个 <a> 元素

父元素,就是其直接的上层元素

所以

<div>
    <p><a href="#">链接</a></p>
</div>

这样的<a>是不会被选中的。


+选择器

div + p

选择 <div> 元素之后紧跟的每个 <p> 元素

乍一听和上面的一样啊~

- 阅读剩余部分 -