结构:支持 -hover, hover 时为 class=".as-rc .as-rc-hover"
一像素圆角 混排的文字
由 <a/> 标签实现时不用加 .as-rc-hover 混排的文字
/*
@ 名称: 1像素圆角
@ 描述: 需要自己设置宽度,或者高度,否则会随内容自适应
@ 用法:
最外层:.as-rc
内容层:.as-rc-cnt
鼠标经过:.as-rc-hover
*/
/* base */
.as-rc{
display:inline-block;vertical-align: middle;
border-left:1px solid #ddd;border-right:1px solid #ddd; /* 可重设 */
}
/*
不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框
这会引发 IE 的 1px 的黑边 bug
Note: 一般不要把 input 作为.as-rc-cnt 层
*/
.as-rc-cnt{
float:left;position: relative;
border-top: 1px solid #ddd;border-bottom:1px solid #ddd; /* 可重设 */
margin:-1px 0;
}
/* HACK for ie6 7 */
div.as-rc, p.as-rc, h2.as-rc, h3.as-rc, h4.as-rc, h5.as-rc, h6.as-rc, ul.as-rc, ol.as-rc{
*display: inline;
}
/* 鼠标经过 */
.as-rc-hover, .as-rc-hover .as-rc-cnt, .as-rc:hover, .as-rc:hover .as-rc-cnt{
border-color: #aaa; /* 可重设 */
text-decoration: none;
}
最好不要给 INPUT[type=submit[button]] || BUTTON 直接添加border,避免 lte IE7 出现的1px 黑边 bug。