圓角自適應寬度按鈕的css實現

有時候我們需要一個鏈接看上去像按鈕,所以就需要用到block屬性,如果要幾個按鈕並排或者需要和其他文字混排的時候,inline-block就可以很好的解決這個問題。

只是不是所有人都響應了Mozilla的號召把Firefox升級到了3.0。遺憾的是,Firefox2不支持這個屬性。網上查了一下,似乎有很多種建議方案,但是只有一個叫-moz-inline-stack的屬性可以作爲替代方案。

已測試通過的浏覽器:IE6, IE7, FF2, FF3。

XHTML:

<a class="rbutton" href="###"><span>Insert</span></a>CSS:

/*======== AUTHOR: Jimbor Chu

===========================*/

a.rbutton, a.rbutton:visited

{

background:url(images/bg_button_left.gif) left top no-repeat;

height: 23px;

line-height: 20px;

text-decoration: none;

color: #fff;

display: inline-block;

display: -moz-inline-stack;

padding-left: 10px;

vertical-align: middle;

font-size: 14px;

}

a.rbutton:hover

{

background-image:url(images/bg_button_left_hover.gif);

color: #fff;

}

a.rbutton span

{

background: url(images/bg_button_right.gif) right top no-repeat;

height: 23px;

line-height: 20px;

padding-right: 10px;

cursor: pointer;

display: -moz-inline-stack;

display: inline-block;

}

a.rbutton:hover span

{

background-image:url(images/bg_button_right_hover.gif);

}

用CSS實現圓角框框
只用CSS 來做圓角矩形的技術很早就有了,但是在網頁的設計過程中,我們通常用圖片實現圓角矩形效果。現在網上很多關于無圖片實現css圓角矩形的方法,雖說巧妙,但是代碼冗長,難以做到簡潔,所以我覺得很疑惑。無圖片...查看完整版>>用CSS實現圓角框框
 
用CSS使圖片自適應顯示寬度
公司的項目中需要顯示由用戶提供URI鏈接的圖片,可是預先無法獲知圖片的尺寸大小,假如圖片尺寸過大將會影響頁面布局。最理想的解決方案自然是自動生成縮略圖,涉及的後台工作較爲複雜,用CSS進行控制是個能夠接受的...查看完整版>>用CSS使圖片自適應顯示寬度
 
用純CSS樣式實現的網頁中圓角矩形代碼
<!-- http://www.knowsky.com/js --><!-- bbs http://www.knowsky.com/bbs--><!-- 要完成此效果把如下代碼加入到<body>區域中 --><script language="javascript">function opencolort...查看完整版>>用純CSS樣式實現的網頁中圓角矩形代碼
 
特效代碼:CSS實現光滑圓角效果
<html xmlns:v><head><style>v\:*{behavior: url(#default#VML);}</style></head><body><v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140...查看完整版>>特效代碼:CSS實現光滑圓角效果
 
用CSS實現無圖片圓角效果
  css圓角效果,IE6, firefox均顯示正常  <html>  <head>  <title>css圓角效果--網頁教學網</title>  <meta http-equiv="content-type" content="text/html; charset=gb2312">  <style type=...查看完整版>>用CSS實現無圖片圓角效果
 
分享 用CSS實現無圖片圓角效果
css圓角效果,IE6, firefox均顯示正常<html><head><title>css圓角效果--網頁教學網</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">div.RoundedC...查看完整版>>分享 用CSS實現無圖片圓角效果
 
如何創建[圓角、邊框色彩漸變、邊框寬度自定義]窗體
先讓大家看一下我要實現的窗體效果: 該窗體的背景色、圓角半徑(下面代碼中將圓角半徑等于邊框寬度,此爲爲般化處理,參考者可視具體需要而對代碼略作修改,使二者具有不同的值,以獲得不同的效果)由...查看完整版>>如何創建[圓角、邊框色彩漸變、邊框寬度自定義]窗體
 
如何創建[圓角、邊框色彩漸變、邊框寬度自定義]窗體
先讓大家看一下我要實現的窗體效果: 該窗體的背景色、圓角半徑(下面代碼中將圓角半徑等于邊框寬度,此爲爲般化處理,參考者可視具體需要而對代碼略作修改,使二者具有不同的值,以獲得不同的效果)由...查看完整版>>如何創建[圓角、邊框色彩漸變、邊框寬度自定義]窗體
 
css圓角效果-網頁特效
<html><br><head><br><title>css圓角效果--網頁特效</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">div.R...查看完整版>>css圓角效果-網頁特效
 
 
回到王朝網路移動版首頁