css 圆形渐变 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <style>
 6         div { width:100px; height:100px; -webkit-transform:rotate(90deg);}
 7         div:before {content:""; display:block; width:100px;height:50px; margin-top:10px; padding:10px; padding-bottom:0; box-sizing:border-box;
 8             border-top-left-radius:50px;
 9             border-top-right-radius:50px;
10             background:-webkit-gradient(
11                 linear,
12                 left top,
13                 right top,
14                 color-stop(0,#fff),
15                 color-stop(1,#fff)
16             ),-webkit-gradient(
17                 linear,
18                 left top,
19                 right top,
20                 color-stop(0,#077df8),
21                 color-stop(1,#74baff)
22             );
23             background-clip:content-box,padding-box;
24         }
25         div:after {content:""; display:block; width:100px;height:50px; padding:10px; padding-top:0; box-sizing:border-box;
26             border-bottom-left-radius:50px;
27             border-bottom-right-radius:50px;
28             background:-webkit-gradient(
29                 linear,
30                 left top,
31                 right top,
32                 color-stop(0,#fff),
33                 color-stop(1,#fff)
34             ),-webkit-gradient(
35                 linear,
36                 left top,
37                 right top,
38                 color-stop(0,#fff),
39                 color-stop(1,#74baff)
40             );
41             background-clip:content-box,padding-box;
42         }
43     </style>
44 </head>
45 <body>
46     <div></div>
47 </body>
48 </html>

 

posted on 2018-01-04 11:46  蝌蚪的精神  阅读(1973)  评论(0)    收藏  举报

导航