CSS的斷行、折行、換行

■ 遇空白也不換行

white-space:nowrap;

■ 自動換行

word-wrap: break-word;
word-break: normal;

■ 英文單字斷行

word-break: break-all;

用CSS修改checkbox的大小

Pure CSS: input[type=checkbox] { width: 16px; height: 16px }

You can disable default checkbox appearance with appearance property in css and after that style it any way you like with borders, background-images and etc:

-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;

To style hover and checked statuses use: :hover, :checked and :hover:checked pseudoclasses.

Another way is to use transform property to enlarge it:

-webkit-transform: scale(1.6,1.6);-moz-transform: scale(1.6,1.6);-o-transform: scale(1.6,1.6);

用CSS設計checkbox & radio

用CSS3設計checkbox

已經用膩原生的checkbox和radiobutton嗎?今天就試著用CSS3來做出不一樣的checkbox和radiobutton吧,而且是不用任何一行JavaScript,重點是,就算IE9以下不支援CSS3也沒關係喔!

純CSS浮動工具提示的作法

關於工具提示,或者說網頁上的浮動附加說明效果,最常見的作法大概是以JavaScriptJQuery來做。

大約在兩年前,曾有一陣子很流行自製網站連結預覽,無論是自己去抓特製的浮動預覽JS語法來用,或者直接使用Snap Shots™這一類連結預覽服務網站所提供的語法,運作邏輯大抵上都不出JavaScript或jQuery的範圍。 

然而,JavaScript或jQuery雖然好用,但,就我個人實作的心得,仍不免會有以下幾點疑慮:

  1. 耗資源
  2. 或多或少拖慢網頁載入速度
  3. 不同瀏覽器及版本的效果與衍生的問題不一
  4. 有可能產生程式衝碼

因此,大概只使用了一年就決定放棄,轉而思考以純CSS的作法來達到相彷的效果。