用一張圖片做可延展的圓角

說明

圖片摘錄自: CSS小技巧:導航按鈕圓角背景自動延伸

a 圖片左邊圓角, span 負責控制右邊拉長

此為一張圖片, 上下兩張是可以制造 hover 效果用

沒有 Hover 效果

a { display: block; float:left; line-height: 37px; /* 下面圓角, 圖片高度 */ text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; padding-left:18px; /* 圖片左邊圓角, 左邊寬度 18px */ margin:5px; /* 各個 button 間距 */ } a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px; /* 圖片右邊距離, 圓角 */ }

所有效果都出現

免費註冊登錄這是很長的一串字非常非常長的一串字一串字

a { display: block; float:left; margin:5px; height: 37px; line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; padding-left:18px; } a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px; } a:hover {background: url(btn_bg.gif) no-repeat 0px -37px;} a:hover span{background: url(btn_bg.gif) no-repeat right -37px;}