html css圆角按钮,CSS：CSS使用滑动门技术实现圆角按钮

使用滑动门技术实现圆角按钮，如图所示，背景图和效果图。

所谓滑动门，就是当按钮的状态改变时，移动背景图，显示不同的状态。此法简单有效，但缺点是不能纵向扩展。要处理纵向扩展，就要使用复杂的圆解技术，如4个圆角图片，四个边的图片加上中间的图片一共9张图来实现。

body {

font-size: 23px;

}

.button {

cursor: default;

font-size: 15px;

background: url(button.png) no-repeat top right;

display: inline-block; /* inline element has layout */

/* float: right;*/ /* Can also be not float. */

height: 24px; /* height of the background image */

padding-right: 15px;

white-space:nowrap; /* Don't wrap line */

line-height: 24px; /* Vertically centralize the text */

-moz-user-select:none; /* Don't select text */

-webkit-user-select:none;

}

.button .inner {

background: url(button.png) no-repeat top left;

display: inline-block;

height: 24px;

white-space:nowrap;

line-height: 24px;

padding-left: 15px;

}

span.button:hover {

text-shadow: 0px 0px 5px #999;

}

span.button:hover span {

}

span.button:active {

text-shadow: 0px 0px 5px #333;

background-position: right bottom;

}

span.button:active span.inner {

background-position: left bottom;

}

The text of the button is very long

不使用a来做按钮，是因为前不久在php中遇到xxxx，点击此链接，会刷新本页，最后只好使用了span来做按钮了，效果是一样的，只不过a的鼠标会自动是手势罢了，上面的文字不可选择。

为了防止选中文字：

-moz-user-select:none; /* Don't select text */

-webkit-user-select:none;

为了防止按钮中的文字换行：

white-space:nowrap; /* Don't wrap line */

HTML中的元素，要么是inline的(可与其他inline元素在同一行)，要么是block的(独占一行)，所以为了让按钮能与其他元素在同一行，还要具有block元素才有的layout功能，使用了

display: inline-block;

让按钮上的文字居中，最好的办法是使用 line-height，让其与按钮的背景图一样高:

line-height: 24px;

由于上面使用到的一些CSS属性都是可继承的，所以不用重复再写。

posted on 2010-06-23 06:06 逛奔的蜗牛 阅读(1292) 评论(0)  编辑 收藏 引用 所属分类: 其他编程