CSS3中一些鮮為人知的屬性

阿新 • • 發佈：2020-07-17

-webkit-tap-highlight-color

這個屬性只用於iOS (iPhone和iPad)。當你點選一個連結或者通過JavaScript定義的可點選元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你可以設定-webkit-tap-highlight-color為任何顏色。想要禁用這個高亮，設定顏色的alpha值為0即可。示例：設定高亮色為50%透明的紅色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

瀏覽器支援: 只有iOS(iPhone和iPad).

-webkit-text-size-adjust

1、當樣式表裡font-size<12px時，中文版chrome瀏覽器裡字型顯示仍為12px，這時可以用html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上會導致頁面縮放失效

3、body會繼承定義在html的樣式

4、用-webkit-text-size-adjust不要定義成可繼承的或全域性的

webkit-appearance

-webkit-appearance: none; //消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式。注意：不同type的input使用這個屬性之後表現不一。text、button無樣式，radio、checkbox直接消失

-webkit-user-select

-webkit-user-select: none; // 禁止頁面文字選擇，此屬性不繼承，一般加在body上規定整個body的文字都不會自動調整

-webkit-touch-callout

-webkit-touch-callout:none;// 禁用長按頁面時的彈出選單(iOS下有效) ,img和a標籤都要加

outline：none

(1)在pc端為a標籤定義這個樣式的目的是為了取消ie瀏覽器下點選a標籤時出現的虛線。ie7及以下瀏覽器還不識別此屬性，需要在a標籤上新增hidefocus="true"

(2)input，textarea{outline:none}取消chrome下預設的文字框聚焦樣式

(3)在移動端是不起作用的，想要去除文字框的預設樣式可以使用-webkit-appearance，聚焦時候預設樣式的取消是-webkit-tap-highlight-color。看到一些移動端reset檔案加了此屬性，其實是多餘。

-webkit-mask

這個屬性是相當強大的，所以詳細的介紹超出了本文的範疇，它非常值得深入研究，因為它可以在實際應用中為你省掉很多時間。

-webkit-mask讓為一個元素新增蒙板成為可能，從而你可以建立任意形狀的花樣。蒙板可以是css3漸變或者半透明的PNG圖片。蒙板元素的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴重依賴來自於background中的語法。示例：

圖片蒙板:

.element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}

漸變蒙板:

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

-webkit-text-stroke

css邊框的一個不足就是隻有矩形的元素才能使用。-webkit-text-stroke可以為文字新增邊框。它不但可以設定文字邊框的寬度，也能設定其顏色。而且，配合使用color: transparent屬性，你還可以建立鏤空的字型！

-webkit-nbsp-mode

換行有時是很棘手的事情：有時你希望文字在適當的地方斷行(而不是折行)，有時你又不想這樣。一個能控制這個的屬性就是-webkit-nbsp-mode，它讓你可以改變 空白符的行為，強制文字在它被用到的地方斷行。通過設定值為space即可實現。

zoom: reset

通常來說，zoom是一個IE專用的屬性。但是webkit也開始支援它了，而且使用值reset，webkit可以實現不錯的效果(有趣的是，IE不支援這個值)。它讓你重設掉瀏覽器中正常的縮放行為——如果某個元素被聲明瞭zoom:reset，頁面上的其它元素在使用者放大頁面的時候都會跟著放大。

注：其實，我們常用來禁用chrome強制字型大小的時候用到的-webkit-text-size-adjust:none;也是可以實現類似的效果，不同的是，設定該屬性的元素內的文字不會被放大/縮小，但是頁面上的其它元素則會變化

-webkit-margin-collapse

這個屬性屬於限制級的，但是它還是非常值得關注。通常，兩個相鄰的元素的margin會摺疊起來(collapse)。這意味著第一個元素的底部的邊距和第二個元素的頭部邊距會被合併到一起。

最常見的例子就是兩個相鄰的<p>元素會共享他們的margin值。想要控制這個表現，我們可以使用-webkit-margin-collapse及其分拆後的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等屬性。預設值是collapse，值separate則停止共享margin值，也就是說，第一個元素的底部邊距和第二個元素的頭部邊距會正常疊加。

-webkit-box-reflect

你還記得幾乎每個網站都把他們的網站logo或者頭部的文字做成倒影的那個年代嗎？謝天謝地，那個年代已經過去了，但是如果你要在一些按鈕、導航、或者其他UI元素上更好的使用這個技術，-webkit-box-reflect是更好的選擇。

這個屬性接受above、below、left和right四個關鍵詞，它們設定倒影的方向，它們和一個設定元素和它的倒影建的距離的數字一起使用。同時，蒙板圖片也是同樣支援的(看上面的-webkit-mask部分，不要搞混了哈)。倒影會自動生成並對佈局沒有影響。下面的元素只用了css，第二個按鈕用了-webkit-box-reflect屬性。示例：

這個倒影會出現在它的父元素的下面並有5px的間距:

-webkit-box-reflect: below 5px;

這個倒影會投射到元素的右邊，沒有間距。然後，一個蒙板將會被應用(url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

-webkit-marquee

另一個屬性讓我們回到美好的從前：那個遍地marquee(跑馬燈)的年代。有趣的是這個已經被遺棄的標籤反而在現在變的很有用，比如我們在比較小的手機螢幕上切換內容，如果不斷行的話文字將不能完全顯示。需要使用WebKit核心瀏覽器。示例：

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要讓marquee工作需要一些前提條件。首先，white-space必須設定為nowrap，這樣才能讓文字不自動換行，其次，overflow必須設定為-webkit-marquee，寬度也要設定為比文字實際長度小的數值。

剩下的屬性確保文字從左邊滾動到右邊(-webkit-marquee-direction)、來回移動(-webkit-marquee-style)以及以比較低的速度移動(-webkit-marquee-speed)。其它的屬性有-webkit-marquee-repetition，用來定義marquee重複的次數，-webkit-marquee-increment, 定義每次遞增的速度變化。

注：雖然html的marquee標籤在Xhtml中被拋棄了，但是各瀏覽器還是支援的，但是有一個問題就是，marquee標籤可能會佔用比較大的cpu，marquee的速度不能太快，而webkit用-webkit-marquee屬性是最好的。

font-size-adjust

這個有用的css3屬性目前只有Firefox支援。我們可以用它來設定指定元素的文字大小(font-size)應該相對於小寫字母的高度(x-height)而不是大寫字母的高度(cap height)。比如，Verdana比同型號的Times字型更清晰，它有著更矮的x-height。為了彌補這個缺陷，我們可以用font-size-adjust屬性來糾正後者。

該屬性在擁有不同的x-height的字型上非常有用。即便你在小心的使用小號字型，在問題出現時font-size-adjust也能提供解決方案。

image-rendering

n年前，圖片並不會被按照其原始大小顯示，而是被設計師給縮放掉。取決於縮放的大小和上下文，圖片可能會在瀏覽器中展現的不太好或者乾脆就是錯掉了的。現在，瀏覽器有了更好的演算法來顯示縮放的圖片，不過，在你的圖片被縮放後完全的控制其表現也是件很讚的事情。

如果你的圖片有比較銳的線條並希望他們在縮放後保持它，這個Gecko私有屬性就顯得特別有用。相關的值是-moz-crisp-edges。同樣的演算法也用在optimizeSpeed，而auto 和optimizeQuality 定義為標準行為(用可行的最佳質量來縮放元素)。 image-rendering 屬性同樣可以用於<video> 和<canvas>元素，和用於背景圖片一樣。這是個css3 標準屬性，但是目前只有Firefox支援。

值得注意的是，-ms-interpolation-mode: bicubic，儘管它是個IE專有屬性。然而，它讓Internet Explorer 7 在縮放圖片後將其渲染為比較高的質量。由於這個瀏覽器預設處理的很爛，所以這個屬性可能會很有用。

-webkit-user-select 和 -moz-user-select

或許你常常不希望使用者在你的網站上選擇文字，無論是否是出於版權的原因。通常大家會有js來實現，另一個方案就是，將-webkit-user-select 和-moz-user-select 的值設為none。

請謹慎使用這個屬性：因為大部分使用者是來檢視資訊的，他們可以複製並存儲下來以備將來之用，所以這種方法既無用也無效。如果你禁用了複製貼上功能，使用者還是可以通過檢視原始檔來獲取到他們想要的內容。搞不懂這個屬性為什麼會被webkit和gecko支援。

-webkit-appearance 和 -moz-appearance

你曾經想過將一張圖片偽裝成單選按鈕麼？或者，一個輸入框看起來像一個複選框？那麼現在appearance 出現了。即便你並不想要讓一個連結看起來總是像個按鈕，下面這個例子也可以讓你瞭解到，只要你願意就可以做到的，示例：

a {
-webkit-appearance: button;
-moz-appearance: button;
}

瀏覽器支援: WebKit, Gecko

text-align: -moz-center/-webkit-center

這是一個屬性（或者精確來說，是個“屬性值”）的存在很讓人驚喜啊。要讓一個塊級元素居中，大家通常將其設定為margin:0 auto。但是，現在你也可以將元素的容器的text-align屬性設定為-moz-center 和 -webkit-center。相應的，你也可以通過設定-moz-left、-webkit-left或-moz-right、-webkit-right將元素居左或者居右。

瀏覽器支援: WebKit, Gecko.

counter-increment

你是否經常希望你可以讓一個有序列表或者一篇文章的所有標題自動編號？不幸的是，目前尚未有css3屬性支援。但是在css2.1中，counter-increment 提供了一個解決方案。這就意味著它已經出現好些年了，而且在IE8中就已經支援了。

配合:before 偽元素和content 屬性，counter-increment可以為所有的html標籤新增自動的編號。即便是巢狀的編碼也是支援的。

quotes

你會因為你的CMS不知道如何正確轉換引用符號而糾結麼？那麼開始使用quotes屬性吧。這樣你就可以自定義任何符號了。然後你就可以用:before和:after偽元素為任何期望的元素指定引號了，悲催的是，webkit瀏覽器不支援這個屬性——經測試，chrome 11已經開始支援這個屬性了（之前的版本沒有測試）。示例：

前面的兩個符號決定第一級引用內容的引號，後面的兩個用於二級引用，以此類推：

q {
   quotes: '«' '»' "‹" "›";
}

字由https://www.wode007.com/sites/73248.html 中國字型設計網https://www.wode007.com/sites/73245.html

text-overflow

或許你會常常遇到這個問題：某個容器對於其內的文字來說太小了，然後你不得不用JavaScript來截斷字串並新增”…”符號以避免文字溢位。

忘掉它吧！採用css3和text-overflow: ellipsis，如果文字比它的容器的寬度要長的話，你就可以強制文字以”…”結束它。唯一的要求是設定overflow:hidden。

word-wrap

當文字在一個比較窄的容器中時，它的某個部分可能會因為太長而不能正確的換行。比如連結就常常引起問題。如果你不想用overflow: hidden隱藏溢位的文字，那麼你就可以設定 word-wrap 為break-word，它可以讓字串在到達容器的寬度限制時換行。

resize

如果你在使用Firefox或Chrome，那麼你肯定注意到了文字框的右下角預設有個小的手柄，它可以讓你調整它們的大小。這個標準的行為由css3 屬性 resize: both實現。

但是它並不僅限於textarea。它可以用於所有的html元素。horizontal 和 vertical 值用於控制調整水平方向還是垂直方向。

請注意：對於display:block元素，如果設定了overflow:visible，resize屬性將會無效

background-attachment

當你為一個設定了overflow:auto的元素指定背景圖片的時候，當內容太多而出現滾動條後，拖動滾動條就會發現背景圖片的位置是固定的，而不是隨著滾動條移動。如果你想要背景圖片隨著內容而滾動，可以設定background-attachment:local。