【CSS3绘画】CSS3制作出来的Opera浏览器Logo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[CSS3绘画] CSS3制作出来的Opera浏览器Logo</title>
<style type="text/css">
body{ margin:50px; padding:0px;}
div{ margin:0 auto; overflow:hidden;}
.O{
width:400px; height:420px;
border:2px solid #FEA5A5;
border-radius:200px;
-moz-border-radius: 200px/210px; -webkit-border-radius: 200px 210px; border-radius: 200px/210px;
background:#FFCBCB;
background:-webkit-gradient(linear, center top, center bottom, from(#ffcbcb), to(#CF0109));
background: -moz-linear-gradient(top, #ffcbcb, #ffcbcb, #CF0109);
-moz-box-shadow:0px 50px 30px hsla(0,0%,0%,.2); -webkit-box-shadow:0px 50px 30px hsla(0,0%,0%,.2);
position:relative;
}
.O_2{
width:400px; height:360px;
padding:25px 0px;
border-radius:200px;-moz-border-radius: 200px/210px; -webkit-border-radius: 200px 210px; border-radius: 200px/210px;
position:absolute; left:0px; top:7px;
background:#FD8487;
background:-webkit-gradient(linear, center top, center bottom, from(#FD8487), to(#A90203));
background: -moz-linear-gradient(top, #f36569, #f36569, #A90203);
}
.O_3{
width:194px; height:354px;
padding:3px;
border-radius:97px; -moz-border-radius: 97px/177px; -webkit-border-radius: 97px 177px; border-radius: 97px/177px;
background:#CF3C3A;
background:-webkit-gradient(linear, center top, center bottom, from(#CF3C3A), to(#D20000));
background: -moz-linear-gradient(top, #CF3C3A, #CF3C3A, #D20000);
}
.O_4{
width:174px; height:334px;
padding:10px;
border-radius:97px;-moz-border-radius: 97px/177px; -webkit-border-radius: 97px 177px; border-radius: 97px/177px;
background:#9A0000;
background:-webkit-gradient(linear, center top, center bottom, from(#9A0000), to(#B80000));
background: -moz-linear-gradient(top, #9A0000, #9A0000, #B80000);
}
.O_5{
width:174px; height:334px;
border-radius:87px;-moz-border-radius: 87px/167px; -webkit-border-radius: 87px 167px; border-radius: 87px/167px;
background:#fff;
}
</style>
</head>
<body>
<div class="O">
<div class="O_2">
<div class="O_3">
<div class="O_4">
<div class="O_5"></div>
</div>
</div>
</div>
</div>
<h2>支持浏览器 chrome、firefox、360</h2>
<h3>原地址查看：http://www.w3cfuns.com/thread-5592900-1-1.html</h3>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
