css 圆形渐变

最新推荐文章于 2024-04-26 16:58:59 发布

weixin_30813225

最新推荐文章于 2024-04-26 16:58:59 发布

阅读量225

点赞数

原文链接：http://www.cnblogs.com/kedoudejingshen/p/css.html

版权

 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>

转载于:https://www.cnblogs.com/kedoudejingshen/p/css.html

weixin_30813225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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);}...
复制链接

扫一扫