代码：CSS仿制 苹果按钮图标

代码：CSS仿制 苹果按钮图标

 

首先，先复习一下：CSS的线性渐变、径向渐变

.linear{
    background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:-moz-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:-o-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
}/*线性渐变*/

.radial{
    background-image:-webkit-radial-gradient( yellow, orange,red);
    background-image:-moz-radial-gradient( yellow, orange,red);
    background-image:-o-radial-gradient( yellow, orange,red);
    background-image:radial-gradient( yellow, orange,red);
}/*径向渐变*/

 

CSS 仿制 苹果按钮图标：     　　2016-2-16

<style type="text/css">
html,body,ul,li,p{margin:0;padding:0;}
/*线性渐变:多色*/
.linear-white{background-image:linear-gradient(180deg, rgba(255,255,255,1),  rgba(255,255,255,0) 90%);}
.linear1{background-image:linear-gradient(180deg, red, orange,yellow,yellow,red);}
.linear2{background-image:linear-gradient(180deg, red, orange,yellow,green,blue,indigo,violet);}

/*径向渐变*/
.radial1{background-image:radial-gradient(at 50% 78%, yellow 8%, orange,red);}
.radial2{background-image:radial-gradient(at 50% 78%, #fea6fc 8%,#c95ceb ,#5b0491 );}
.radial3{background-image:radial-gradient(at 50% 78%, #5ebaf9 8%,#3871e3,#2244aa  );}
.radial4{background-image:radial-gradient(at 50% 78%, #e0f2fc 8%,#5baadc,#0f4e79  );}
.radial5{background-image:radial-gradient(at 50% 78%, #e9fcfc 8%,#a9beca,#465363  );}
.radial6{background-image:radial-gradient(at 50% 78%, #fafafa 8%,#b5b5b5,#888888  );}
.radial7{background-image:radial-gradient(at 50% 78%, #4dfd47 8%,#23e621,#028500  );}
.radial8{background-image:radial-gradient(at 50% 78%, #fefa68 8%,#feba22,#aa5600  );}

.img-circle{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.apple-btn{position:relative;width:100px;height:100px;margin:20px;float:left;}
.mask{position:absolute;top:5px;left:13px;right:13px;height:50px;}
.apple-btn p{position:absolute;color:#fff;top:50%;margin-top:-20px;font-size:32px;font-family:'Microsoft YaHei';width:100%;text-align:center;text-shadow:0 2px 5px #999;z-index:2;}
.clear{clear:both;}
</style>
<h1>线性渐变</h1>
<div class="apple-btn linear1 img-circle"><div class="mask linear-white img-circle"></div></div>
<div class="apple-btn linear2 img-circle"><div class="mask linear-white img-circle"></div></div>
<div class="clear"></div>
<h1>径向渐变</h1>
<div class="apple-btn radial1 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial2 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial3 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial4 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial5 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial6 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial7 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial8 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

 

 

..

 

posted on 2016-02-16 10:44 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/5192025.html