访当当网的图标

 

 

在当当网上看到一种图标，然后自己试差用CSS3实现一下。      http://layerstyles.org/builder.html

 

 

最后实现 ：

 

 

 

<style type="text/css">

.drop{
	
	width:200px; height:200px; margin:50px auto;	
	
	border: 3px solid #2c8004;
	border-top-left-radius: 200px;
	border-top-right-radius: 200px;
	border-bottom-right-radius: 200px;
	background-image: -webkit-gradient(linear, undefined, from(#80ee96 4%), to(#2c8004 43%));
	background-image: -webkit-linear-gradient(-69deg, #80ee96 4%, #2c8004 43%);
	background-image: -moz-linear-gradient(-69deg, #80ee96 4%, #2c8004 43%);
	background-image: -o-linear-gradient(-69deg, #80ee96 4%, #2c8004 43%);
	background-image: -ms-linear-gradient(-69deg, #80ee96 4%, #2c8004 43%);
	background-image: linear-gradient(-69deg, #80ee96 4%, #2c8004 43%);
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
	box-shadow: 0 1px 5px rgba(0,0,0,0.75);

}

.drop_note{
	font-family:"微软雅黑";
	font-size:60px;
	padding:20px;
	display:inline-block;
	padding-left:40px;
	color:#FFF;
	text-shadow:2px 0 #94c86f,-2px 0 #94c86f,0 2px #94c86f,0 -2px #94c86f;
}

</style>

        <div class="drop">
        	<span class="drop_note">图书满返</span>
        </div>

 

 

 http://jsfiddle.net/zsk526/HNpMN/