结构:支持 -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。