Hello CSS! 和图片说Bye Bye

在一次聊天中讨论到如何利用CSS来制作一个按钮，不但能自适应宽高，并且还要在不实用图片的情况下，让按钮有类似“外描边”、“内描边”和圆角的效果，并且兼容IE6、IE7。所以今天特地花了点时间来做这个。

当完成以后，发现单纯的按钮有点单调，就想加点ICON来美化一下。可既然按钮都是用CSS来完成，那ICON还用图片来显示，是否有些背道而驰，所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下，也加入一些CSS3属性，起到渐进增强的目的，让“高级用户”能够得到更好的呈现效果。

这样做的好处在于按钮和图标颜色都能通过CSS来调整，维护起来比较方便。还有就是CSS的渲染速度比较快，同时还减少了HTTP请求量。

不过，并不是说用CSS必定比图片好，关键还是要根据实际环境和需求，合理使用才是关键。

本例兼容：IE6-10、Chrome、Safari、Opera。

一、布局。

<span class="btn btnGreen">
	<i class="btnLine"></i><!-- 上边框 -->
	<span class="btnIn"><!-- 内边框 -->
		<a href="#" class="btnBg btnGreen">Button</a><!-- 背景色 -->
	</span>
	<i class="btnLine"></i><!-- 下边框 -->
</span>

二、配置公用属性，以便资源复用。

.btn{
	text-decoration:none;
}
.btn i{
	font-style:normal;
}
.btn, .btnBg{
	display:inline-block;
	vertical-align:bottom;
}
.btnDown{
	position:relative;
}
.btnLine{
	display:block;
	padding-top:1px;
	border-width:0 1px;
	border-style:solid;
}
.btnIn{
	display:block;
	padding:0 1px;
	text-align: center;
}
.btnBg{
	color:#FFF;
	font-weight:700;
	text-decoration:none;
}

三、给按钮配置颜色

.btnGreen .btnLine{
	border-color: #BBDCF4; /*边角虚化*/
	background: #14517A; /*上下边框颜色*/
}
.btnGreen .btnIn{
	background-color:#14517A; /*左右边框颜色*/
}
.btnGreen .btnBg{
	padding:10px 20px;
	border:1px solid #5CBBE9; /*内边框颜色*/
	background-color:#20A4E2; /*背景色*/
	text-shadow:1px 1px 1px #14517A;
}
.btnGreen:hover{
	background-color:#4FB4ED;
}
.btnGreen .arrowT{
	-webkit-filter: drop-shadow(-1px -1px 1px #14517A);
}
.btnGreen .arrowR{
	-webkit-filter: drop-shadow(-1px 1px 1px #14517A);
}
.btnGreen .arrowB{
	-webkit-filter: drop-shadow(1px 1px 1px #14517A);
}
.btnGreen .arrowL{
	-webkit-filter: drop-shadow(1px -1px 1px #14517A);
}
.btnGreen .btnPr{
	position:relative;
	padding-right:30px;
}
.btnGreen .btnPl{
	position:relative;
	padding-left:30px;
}

四、利用css border属性绘制箭头

/* 箭头设置 */
.arrow{
	position:absolute;
	top:50%; right:12px;
	width: 0;
	height: 0;
	border-width: 6px;
	border-style:solid dashed dashed;
	border-color: #FFF transparent transparent;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
}
.arrowT{
	margin-top:-8px;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);  /* 2=180度 */
}
.arrowR{
	margin-top:-6px;
	margin-right:-3px;
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* 3=270度 */
}
.arrowB{
	margin-top:-3px;
}
.arrowL{
	margin-top:-6px;
	margin-right:3px;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* 1=90度 */
}
.arrowBack, .arrowGo{
	font-family:\5B8B\4F53;
	letter-spacing: -8px;
	color:#FFF;
}
.arrowBack{
	padding-right:13px; /* letter-spacing + padding */
}
.arrowGo{
	padding-left:5px;
	padding-right:8px;
	*padding-right:0;
}

五、利用@font-face来代替图片ICON
IE：从IE4开始支持eot格式，IE9开始支持woff。
webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式
Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；
iPad, iPhone and Android 3.0+ 支持SVG fonts。

/* 设置图标 */
@font-face {
	font-family: 'RaphaelIcons';
	src: url('../fonts/raphaelicons-webfont.eot'); /* IE9*/
	src: url('../fonts/raphaelicons-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/raphaelicons-webfont.woff') format('woff'),
		url('../fonts/raphaelicons-webfont.ttf')  format('truetype'),
		url('../fonts/raphaelicons-webfont.svg#raphaelicons-webfont') format('svg'); /* IE6-IE8 */ /* chrome、firefox */ /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ /*  iOS 4.1- */
}
.cssIcon{
	padding-right:10px;
	font-family: 'RaphaelIcons';
}

Demo

小提示：如需手机访问可以把DEMO页的地址通过二维码生成器转换成二维码，然后用移动设备扫描访问。

附录：
Raphaël Icon-Set via @font-face
20 @fontface Icon Sets