5 创建div，背景3 个颜色结点（不均匀分布）6 预览效果 7 附上源码div{ margin-top:20px;}.div1{width:400px; height:200px; background:#fff;background: -webkit-linear-gradient( #0CF , blue ,red); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient( #0CF, blue ,red); /*...
5.1 多个渐变点默认均匀分布 div { background: linear-gradient(to right, red, blue, green) } 理论上渐变点数目不受限制,实际效果如下图: 5.2 多个渐变点不均匀分布 div { background: linear-gradient(red 5%, green 15%, blue 60%) } 6.重复性渐变 div { background: repeating-linear-gradient(red...
background: repeating-linear-gradient(rgba(255,255,255,.5) -1%, rgba(107, 107, 107, 0.1), repeating-linear-gradient(135deg, #b6b6b6, #B6B6B6 10px, #b2b2b2 10px, #b2b2b2 20px); -courtyen 通常,您可以添加多个背景,用逗号隔开。列出的第一个将显示在顶部。 http://css-tricks.com/stac...
background-image: linear-gradient(to bottom right, red , yellow); 1. 2. //线性渐变指定一个角度: background-image: linear-gradient(0deg, red, yellow); background-image: linear-gradient(90deg, red, yellow); background-image: linear-gradient(180deg, red, yellow); background-image: linear...
margin, width, height 这块自己随意定义,关键属性有两个——background中的linear-gradient 和 background-size。 先来linear-gradient,分析其属性,总共有9个属性 45deg外加8个后接百分比的颜色值。 45deg表示条纹倾斜角度,这个好理解。如果不加这个属性,就成了横条纹了,以此90deg就是竖条纹,可以组成花格条纹。
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(Gecko)(熟悉的有 Firefox,Flock 等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Op...
css3渐变之线性渐变linear-gradient,c3新增渐变(gradiet)属性,可以让两个或多个指定的颜色之间显示平稳的过渡。通过使用CSS3渐变(gradiet)替代使用图像来实现这些效果,减少下载的事件和宽带的使用,大大提高工作效率。CSS3定义了两种类型的渐变(gradiet):1、线性渐
使用多个颜色节点下面的实例演示了如何设置多个颜色节点:实例 带有多个颜色节点的从上到下的线性渐变: #grad { background-image: linear-gradient(red, yellow, green); } 尝试一下 » 下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变:实例 #grad { /* 标准的语法 */ background-image: linear-...
.divOne{background:linear-gradient(30deg, red, blue); }.divTwo{background:linear-gradient(0deg, red, blue); }.divThree{background:linear-gradient(90deg, red, blue); } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 5.线性渐变-使用多个颜色点: ...
3. 多个色块 div{background:-webkit-linear-gradient(110deg,#000 33%,rgba(0,0,0,0)33%),-webkit-linear-gradient(110deg,#dd0000 66%,#ffc608 66%);} image 这里为了达到效果运用了在同一个北京中运用了两个线性渐变,这里我们需要注意的是,第一个线性渐变我们使用了rgba(0,0,0,0)定义了一个全透...