{"action":"opened","issue":{"url":"https://api.github.com/repos/jobn123/blog/issues/26","repository_url":"https://api.github.com/repos/jobn123/blog","labels_url":"https://api.github.com/repos/jobn123/blog/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/jobn123/blog/issues/26/comments","events_url":"https://api.github.com/repos/jobn123/blog/issues/26/events","html_url":"https://github.com/jobn123/blog/issues/26","id":189112762,"number":26,"title":"26. 条纹背景","user":{"login":"jobn123","id":11002787,"avatar_url":"https://avatars.githubusercontent.com/u/11002787?v=3","gravatar_id":"","url":"https://api.github.com/users/jobn123","html_url":"https://github.com/jobn123","followers_url":"https://api.github.com/users/jobn123/followers","following_url":"https://api.github.com/users/jobn123/following{/other_user}","gists_url":"https://api.github.com/users/jobn123/gists{/gist_id}","starred_url":"https://api.github.com/users/jobn123/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jobn123/subscriptions","organizations_url":"https://api.github.com/users/jobn123/orgs","repos_url":"https://api.github.com/users/jobn123/repos","events_url":"https://api.github.com/users/jobn123/events{/privacy}","received_events_url":"https://api.github.com/users/jobn123/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-14T13:31:09Z","updated_at":"2016-11-14T13:31:09Z","closed_at":null,"body":"## 条纹背景\r\n\r\n### CSS3的线性渐变\r\n\r\n#### 语法\r\n```css\r\nbackground: linear-gradient([<point> || <angle>]?, color-stop1, color-stop2, ...);\r\n```\r\n其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变\r\n\r\n#### 示例，（向下兼容）\r\n```css\r\nbackground: red; /* For browsers that do not support gradients */\r\nbackground: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */\r\nbackground: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */\r\nbackground: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */\r\nbackground: linear-gradient(red, yellow); /* Standard syntax */\r\n```\r\n\r\n现在我们假设我们有一条垂直线性渐变，颜色从#fb3过渡到#58a\r\n```css\r\nbackground: -webkit-linear-gradient(#fb3 20%, #58a 80%);\r\n```\r\n效果是这样的\r\n![Aaron Swartz](http://7xoboh.com1.z0.glb.clouddn.com/ccccc.jpeg)\r\n还可以通过`background-size`来调整尺寸\r\n```css\r\nbackground: -webkit-linear-gradient(#fb3 50%, #58a 50%);\r\nbackground-size: 100% 20px;\r\n```\r\n效果是这样的\r\n![Aaron Swartz](http://7xoboh.com1.z0.glb.clouddn.com/aaa.jpeg)\r\n还可以创建超过两颜色的条纹\r\n```css\r\nbackground: -webkit-linear-gradient(#fb3 33.3%, #58a 66.6%， yellowgreen, 0);\r\nbackground-size: 100% 30px;\r\n```\r\n![Aaron Swartz](http://7xoboh.com1.z0.glb.clouddn.com/bbb.jpeg)\r\n\r\n#### 垂直条纹\r\n```css\r\nbackground: -webkit-linear-gradient(180deg, #fb3 33.3%, #58a 66.6%, yellowgreen 0);\r\n    background-size: 30px 100%;\r\n```\r\n效果如下图\r\n![](http://7xoboh.com1.z0.glb.clouddn.com/d.jpeg)\r\n"}}
{"actor":{"display_login":"jobn123"}}