1.background:linear-gradient(20deg/(to) bottom right,orange,red,hsl(60,100%,50%));

2.-webkit-chrome/safari

-o-opera

-ms-IE9

exclude "to""at"

a fallback

3.backround:radial-gradient(circle closest/farthest-side/corner (at) 100px 200 px,yellow,green);

4.Color stop

background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);

5.Repeating gradients

background: repeating-linear-gradient(white, black 10px, white 20px);
background: repeating-linear-gradient(white, black 10px, white 20px);
 

【CSS3】Advanced10：Gradient的更多相关文章

  1. 【CSS3】Advanced3：Universal, Child, and Adjacent Selectors

    1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...

  2. 【CSS3】Advanced11：Media Queries

    1.Browser-size specific CSS @media screen and (max/min-width:1000px){} 2.Orientation-specific CSS? @ ...

  3. 【CSS3】Advanced9：Transformation

    1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...

  4. 【CSS3】Advanced8：CSS Backgrounds: Multiples, Size, and Origin

    1.Multiples,Size,and Origin eg:background-image:url(bg.png),url(bullet.png) 0 50% no-repeat,url(arro ...

  5. 【CSS3】Advanced7：CSS Transitions

    1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...

  6. 【CSS3】Advanced6：Attribute Selectors

    1.with the attribute abbr[title]{color:red} 2.with the attribute and it's value input[type=text][dis ...

  7. 【CSS3】Advanced5：At Rules:@import, @media, and @font-face

    1.@import bolt another stylesheet onto your existing one. @import url(**.css); must be placed at the ...

  8. 【CSS3】Advanced4：Advanced Colors

    1.rgba(red,green,blue,alpha(不透明度0.0(完全透明)与 1.0(完全不透明)) 2.HSLa(hue(色调 0red 120green 240blue),saturati ...

  9. 【CSS3】Advanced2：Shadows

    1.Box Shadows box-shadow:h-shadow v-shadow [blur模糊距离 spread阴影尺寸 color inset]; 2. Text Shadows text-s ...

随机推荐

  1. this在JavaScript中的工作范围

    this在JavaScript中的工作范围 在一个函数中,this的行为,取决于JavaScript函数的调用方式和定义方式,而不仅仅是看它如何被定义的. var fullname = 'Fu';va ...

  2. css文本换行你所不知道的技巧

    前言:这是最近翻译的一篇文章 我在header标签开头忘里边加入一个span标签的时候,有一点小问题.我总是想确保在span标签之前能够换行.明确地讲,在标签前边加入<br> 并没有什么错 ...

  3. php 中文字符串首字母的获取函数

    这篇文章介绍了php 中文字符串首字母的获取函数,有需要的朋友可以参考一下 function chineseFirst($str) { $str= iconv("UTF-8",&q ...

  4. div重叠不变形

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 软键盘android:windowSoftInputMode属性详解

    android:windowSoftInputModeactivity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性.这个属性能影响两件事情:[一]当有焦 ...

  6. ms flexbox 布局 (ko list)

    <!DOCTYPE html> <html> <head> <title></title> <script src="js/ ...

  7. 获取iOS设备型号的方法总结

    三种常用的办法获取iOS设备的型号: 1. [UIDevice currentDevice].model (推荐): 2. uname(struct utsname *name) ,使用此函数需要#i ...

  8. POJ 2375 Cow Ski Area[连通分量]

    题目链接:http://poj.org/problem?id=2375题目大意:一片滑雪场,奶牛只能向相邻的并且不高于他当前高度的地方走.想加上缆车是的奶牛能从低的地方走向高的地方,求最少加的缆车数, ...

  9. javascript pattern

    bing:javascript pattern baidu:module pattern javascript高级程序设计 姊妹篇:ajax高级程序设计 http://wenku.baidu.com/ ...

  10. SQL Union和SQL Union All用法

    SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...