整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
書使我快樂-哈哈
最近讀了張鑫旭的新書《CSS世界》收獲了不少奇技淫巧和對CSS的深度理解
也正值個人在公司內部進行部分章節的內容分享，于是順帶著直接把我即將分享的內容先給大家過過目了，就當省去了大家買了書后，無暇顧及觀看的尷尬吧！
本書的最后三章分別是
下面我就直接進入主題，開始對每一章節進行一個非系統的分享了
元素的顯示與隱藏
使用CSS讓元素不可見的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見，但背后卻在多個維度上都有差別
下面是總結的一些比較好的隱藏實踐，大家一起來根據實際開發場景來選擇合適的使用
比較好的隱藏實踐
<script type="text/html"> <!-- 圖片是不會發送請求的 --> <img src="1.jpg" /> <!-- 如果想嵌套需要借助textarea了 --> <textarea style="display: none;"> <img src="2.png" /> </textarea> </script> 復制代碼
<div id="box">成都</div>
<script>
let oBox = document.getElementById('box');
console.log(oBox); // <div id="box">成都</div>
</script>
.hidden {
position: absolute;
visibility: hidden;
}
<div class="div hidden">一杯敬朝陽 一杯敬月光</div>
.vh {
visibility: hidden;
}
.out {
position: relative;
left: -999em;
}
.clip {
position: absolute;
clip: rect(0, 0, 0, 0);
}
<div class="clip">
<div class="out">青花瓷</div>
</div>
<div style="position: relative;top: -999em;">獅子座</div>
<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
<p style="text-indent: -999999px;">天下無雙</p>
根據實際的隱藏場景選擇合適的隱藏方法，這里就不再多說了，接著往下看吧
display與元素的顯隱
我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了
display可以說是web顯隱交互中出場頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡
none做到了無法點擊、無法使用屏幕閱讀器等輔助設備訪問，不占空間，其實不僅僅是這樣，更應該知道的是
me: 我有酒，那么別說你沒有故事
我知道display:none你才不是一個沒有故事的女同學
display: none的元素的background-image圖片根據不同瀏覽器的情況加載情況不一
父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載
3.在IE瀏覽器下，無論怎么搞都會請求圖片資源，就是這么任性
因此，在實際開發的時候，例如頭圖輪播切換效果
那些默認需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細小改動就可以明顯提升頁面的加載體驗，也是非常實用的小技巧
whatever
上面說的興致盎然，但實際中不可能全部都是背景圖去加載圖片資源的
還有另外一個好朋友，img元素，然并卵的是，上面說了一大堆加載不加載的情況，對img來說沒個鳥用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請求著資源
活久見
都說display:none做事最純粹，最干凈，不能被點擊，觸碰到，然而下面這種情況又是什么鬼？
出來解釋解釋，我們都是文明人是絕對不會動武的！
<form action="/index.php"> <input type="submit" id="hi" style="display: none;"> <label for="hi">提交</label> </form>
隱藏的按鈕會觸發click,觸發表單提交，此現象出現在時髦的瀏覽器中(IE9+，現代標準瀏覽器中）
既然有這種例外情況那加了display:none的意義又是什么呢？
很多都是純天然的
HTML中有很多標簽和屬性天然自帶display:none
<input type="hidden" name="id" value="1" /> // 專門用來放置類似token或id這些隱藏信息的 // 所以說，表單元素的顯隱并不影響數據的提交 // 其真正影響的是disabled屬性 復制代碼
<div hidden>看不見我</div>
// IE11及現代標準瀏覽器都支持，如果做兼容需要這樣寫下即可
[hidden] {
display: none;
}
復制代碼
既然說到了visibility了，那么就趕緊邀請visibility閃亮登場吧
visibility與元素的顯隱
visibility要為自己正名，不僅僅是保留空間這么簡單
看點多多：
<ul style="visibility: hidden;"> <li style="visibility: visible;">1</li> <li>2</li> <li>3</li> <li style="visibility: visible;">4</li> </ul> 復制代碼
2. 與css計數器visibility:hidden雖然讓元素不可見了，但是不影響其計數效果，不會重新計算結果
3. 與transition設置了visibility:hidden的元素，可以很好的展現transition過渡效果
這是因為transition支持的css屬性中有visibility(果然是兄弟)，而并沒有display屬性
visibility:hidden除了對transition友好外，對js來說也很友好
在實際開發中，需要對隱藏元素進行尺寸和位置的獲取，來實現布局精確定位的交互
此時，就建議使用visibility:hidden
.hidden {
position: absolute;
visibility: hidden;
}
let ele = document.getElementById('demo');
console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());
復制代碼
好了以上內容要告一段落了，我們繼續開始新的征程吧，哈哈
用戶界面樣式
用戶界面樣式指的是CSS世界中用來幫助用戶進行界面交互的一些CSS樣式，主要有outline和cursor等屬性
和border形似的outline屬性
outline表示元素的輪廓，語法也和border一樣，分為寬度、類型和顏色三個值
.outline {
height: 60px;
width: 60px;
outline: 2px dashed #0c9;
}
復制代碼
樣式表示上相同，但是設計的初衷卻是不太相同的，這一點天地日月可鑒
outline是一個和用戶體驗密切相關的屬性，與focus狀態以及鍵盤訪問密切相關
對于按鈕或鏈接，通常的鍵盤操作是：Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素)，或者focus設置了tabindex的普通元素，然后按Shift+Tab是反向訪問
重點來了！
默認狀態下，對于處于focus狀態的元素，瀏覽器會通過發光or虛框的形式進行區分和提示，這是友好的用戶體驗，很有必要，不然用戶很難知道自己當前聚焦在了哪個元素上面，會迷失自我
元素如果聚焦到了a鏈接上，按下回車鍵就會跳轉到相應鏈接，以上的交互都是基于鍵盤訪問的，這就是為什么outline和鍵盤訪問如此親密了
不專業的行為
很多時候直接在reset樣式的時候，寫成如下形式是非常不可取的
* { outline: 0 none; }
或
a { outline: 0 none; }
復制代碼
這樣直接一竿子打死一群鴨子的做法是不對的，更多的時候是因為瀏覽器內置的focus效果和設計風格格格不入，才需要重置，而且要使用專門的類名
例如：
.input {
outline: 0;
}
// 但是，必須把focus狀態樣式加上
.input:focus {
border-color: Highlight
}
復制代碼
最后再強調一遍：萬萬不可在全局設置outline: 0 none;
這樣的操作會造成鍵盤訪問的時候用戶找不到當前焦點，容易產生困擾的，為了大家好，收斂一下吧
下面來點干貨: 在實際開發中，有時候需要讓普通元素代替表單控件元素有outline效果
舉個栗子：submit按鈕來完成UI設計是非常麻煩的，所以使用label元素來移花接木，通過for屬性和這些原生的表單控件相關聯
[type="submit"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.btn {
display: inline-block;
padding: 2px 12px;
background-color: #19b955;
color: #fff;
font-size: 14px;
cursor: pointer;
}
:focus + label.btn {
outline: 1px dashed hotpink;
outline: 3px auto -webkit-focus-ring-color;
}
<div class="panel">
<input type="submit" id="box">
<label for="box" class="btn">提交</label>
</div>
復制代碼
真正的不占據空間的outline及其應用
outline是一個真正意義上不占任何空間的屬性，Amazing
頭像剪裁的矩形鏤空效果
先來看個效果圖
上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨核心css是
.crop {
overflow: hidden;
}
.crop .crop-area {
width: 80px;
height: 80px;
outline: 256px solid #000;
outline: 256px solid rgba(0, 0, 0, .5);
background: url(about:blank);
background: linear-gradient(to top, transparent, transparent);
filter: alpha(opacity=50);
cursor: move;
}
:root .crop-area {
filter: none;
}
復制代碼
用一個大大的outline來實現周圍半透明的黑色遮罩，因為outline無論設置多么多么大，都不會占據空間影響布局，至于超出的部分，直接給父元素設置一個overflow:hidden就搞定了 注意：
自動填滿屏幕剩余空間的應用技巧
開發中很多時候，由于頁面內容不夠多，導致底部footer會出現尷尬的剩余空間，解決方法往往也有很多種，在此我們還是依然利用outline的功能來完美實現一下
關鍵的css就是設置一個超大輪廓范圍的outline屬性，如給個9999px，保證無論屏幕多高，輪廓顏色都能覆蓋
值得注意的是，outline無法指定方位，它是直接向四周發散的，所以需要配合clip剪裁來進行處理,以左邊和上邊為邊界進行裁剪
.footer {
height: 50px;
}
.footer > p {
position: absolute;
left: 0;
right: 0;
text-align: center;
padding: 15px 0;
background-color: #00a1f5;
outline: 9999px solid #00a1f5;
color: #fff;
clip: rect(0, 9999px, 9999px, 0);
}
<div class="footer">
<p>沒錯，我就是footer</p>
</div>
復制代碼
光標屬性
光標屬性cursor我們真的是最熟悉的陌生人啊
為什么這么說呢，因為在眾多的屬性值面前，我們似乎只用到了pointer(手形)(最常用的，沒有之一)，move(移動)，default(系統默認)這幾樣
在cursor的世界里，遠比我們想象的要豐富很多，下面按照功能特性來對其進行分類吧
琳瑯滿目的cursor屬性值
友情不友情的小提示：☆（表示常用）
// 自定義光標
.cur-none {
cursor: url(transparent.cur), auto;
}
:root .cur-none { // IE9+
cursor: none
}
復制代碼
body {
cursor: progress;
},
// 當js加載完成后再將光標cursor設為auto;
// 增加了用戶體驗
document.addEventListener('DOMContentLoaded', () => {
document.body.style.cursor = 'auto';
});
復制代碼
p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
}
<p>弱水三千</p>
// 不過現在最新版的瀏覽器都自動設置了cursor:default
復制代碼
以上內容就介紹完了用戶界面樣式的全部內容了，還有最后一章的冷知識，大家不要方，繼續看下去，了解一下，了解一下，了解一下
流向的改變
說出來你可能不信，direction可以改變水平流向，盡管知道或者使用過的人少之又少，但并不妨礙它的發光發熱
而且屬性簡單好記，值少，兼容極好ie6支持，可以來挖掘一下它的神奇功效
direction
僅僅兩個值：
當然看到這里你可能會感覺，這些說起來都沒什么鳥用，因為大招是不輕易放出的，而真正有用的地方在于改變網頁布局的時候
direction屬性默認有一個特性
可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現順序
舉個栗子：顛倒順序
<div class="box" dir="rtl"> <p>我是第2名</p> <p>我是第一名</p> </div> <p dir="rtl"> <img src="../1.jpg" alt="貓"> <img src="../2.png" alt="狗"> </p> 復制代碼
再舉個栗子：比如制作彈窗組件的時候，確認和取消按鈕有的時候會根據用戶的使用行為會顯示在不同的位置
下面來看看這種特性的表現在實際開發中的作用
windows用戶看到的樣子：
mac用戶看到的樣子：
好了，direction的話題就告一段落，接下來介紹最后一個知識了，堅持住，快休息了writing-mode
改變CSS世界縱橫規則的writing-mode，如此強大的功能，居然沒有被大家發掘和廣發應用起來，實屬遺憾了，話不多說，往下看
writing-mode作用及真正需要關注的屬性值
writing-mode可以改變排版，變成垂直流，如下圖所示
在使用語法上，也是需要記兩套的，一套是IE私有屬性，一套是CSS3規范屬性CSS3語法：
writing-mode: horizontal-tb; 默認值 文本流是水平方向的 writing-mode: vertical-rl; 文本是垂直方向的，閱讀順序從右向左(古詩的順序) writing-mode: vertical-lr; 文本垂直方向，閱讀順序從左到右(水平變成了垂直展示) 復制代碼
IE語法：
IE的writing-mode多達11個，真正有用的記住兩個就好了 -ms-writing-mode: lr-tb; 初始值 lr-tb對應的是CSS3語法中的horizontal-tb -ms-writing-mode: tb-rl; tb-rl對應的是CSS3語法中的vertical-rl -ms-writing-mode: tb-lr; tb-lr對應的是CSS3語法中的vertical-lr 復制代碼
針對實戰版來整理一份writing-mode是這樣的
writing-mode: lr-tb | tb-rl | tb-lr (IE8+) writing-mode: horizontal-tb | vertical-rl | vertical-lr; 復制代碼
對于垂直排版來說，實際開發是很少會遇到的，不過還是要說說writing-mode帶來的改變
水平方向也能margin合并
我們都知道兩個相鄰的元素垂直的margin會合并，當元素變為垂直流的時候，水平的margin也會合并
.vertical-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
<div class="div vertical-mode">
<div class="list" style="margin-left: 20px;">one</div>
<div class="list" style="margin-right: 50px;">two</div>
</div>
復制代碼
普通塊元素可以使用margin: auto實現垂直居中
img {
display: block;
margin: auto 0;
}
<div class="box vertical-mode">
<img src="../1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center;background: gray;">
<div class="demo">青花瓷</div>
<!-- <img src="../2.png" alt=""> -->
</div>
復制代碼
上面分別是圖片元素和普通塊元素實現的垂直居中代碼，眼見為實，看圖
text-align:center實現圖片垂直居中(同上實現的效果)
<div class="box vertical-mode" style="text-align: center;"> <img src="../2.png" alt=""> </div> 復制代碼
使用text-indent實現文字下沉效果
核心css
.btn:active {
text-indent: 2px;
}
<a href="javascript：;" class="btn vertical-mode">領</a>
復制代碼
這種文字下沉效果只能適合中文，因為在垂直流排版的時候中文是不會旋轉的
而且這種效果只適合一個字的情景
實現全兼容的icon fonts圖標旋轉效果
老IE下讓小圖標旋轉很麻煩，writing-mode把文檔變成垂直流的時候，英文、數字和字符號都天然的轉了90°
@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也沒問題
<span class="icon-play vertical-mode">剪頭朝下</span> 復制代碼
好了，這就是《CSS世界》里最后三章的全部內容了，終于寫完了，哈哈，希望大家有收獲一些冷知識，另外看書還是要買正版的，地址我就不發了，大家還請支持張鑫旭老師的作品簡單說兩句
做個個人的小總結吧：
css有很多奇妙的地方，在某些特性當初被設計出來的時候可能只是為了某些圖文排版而生
但是我們可以利用它們帶來的特性發揮自己的創造力，實現其他很多意想不到的效果，因此，上面所講述的所有知識點，盡管很多內容都有點奇技淫巧以悅婦孺的過程
但這也給我們開發的過程中，提供了一些很出奇的妙招，值得我們好好學習領悟
感謝個位的觀看了，再見了，哈哈
隨最新的網頁設計趨勢，緊跟設計潮流是設計師們必做的功課之一?？焖俑木W頁設計趨勢和網頁開發技術對2019年的網頁設計趨勢來說必將產生直接的影響。
回顧2018年的網頁設計趨勢，不難看出許多設計趨勢都是周期性和持續性的，例如盛行不衰的極簡主義和響應式設計。那么，2019年它們的流行度也將絲毫不減，并且隨著移動端網絡的興盛，會更加注重移動端網頁設計的界面美觀度和用戶體驗。那么，具體2019年網頁設計趨勢有哪些呢？
前情提要：
1. 移動優先
2. 網頁打開速度
3. 個性化插畫設計
4. 動態網頁背景（CSS3動效、全屏視頻背景）
5. 極簡主義
6. 響應式設計
7. 漸變設計
8. 排版設計
9. 設計工具
2019年網頁設計趨勢之一：移動優先
此前，谷歌推出了移動優先索引，Mobile-First Indexing，主要是優先從移動頁面獲取內容和鏈接，以此建立索引。因此，2019年，更多網頁設計師會優先考慮網頁的移動版本設計。而SEO并不是僅僅是其中一個推動網頁移動優先設計的因素。據統計，目前全球50%的網站流量都來自于移動端。隨著移動端用戶群體的增加，良好的視覺效果和搜索體驗也是2019年移動優先設計中需要考慮的因素。
圖片來源：Kizen Homeby David Kovalev
2019年網頁設計趨勢之二：網頁打開速度
短短三秒鐘就能決定用戶的去與留。Akamaii和Gomez.com的研究表明，50%的用戶希望當他們在點擊某個網站時，加載時間不超過三秒鐘，甚至更短。而加載時間過長，則會導致他們放棄這個網站。同樣，由于2018年7月谷歌宣布的速度更新（ Speed Update）算法，設計師們在未來的設計中需要縮短網頁加載時間。
圖片來源：ASAPby Hurca?
2019年網頁設計趨勢之三：個性化插畫設計
2017年下半年，Slack，Dropbox等公司開始使用個性化的插畫圖案來傳達品牌特色，使插畫設計逐漸開始流行。自然，2018年是插畫設計非常流行的一年。但到2019年， 插畫設計預計將會達到一個新的高度。
作為一種重要的現代網頁設計的視覺傳達形式，個性化的插畫內容往往比抽象的文字更有趣，更具有視覺沖擊力，更能彰顯品牌特色，傳遞給用戶更深刻的品牌概念。獨特的設計風格和大膽的色調，對于用戶而言也更能加深品牌印象。根據數據統計，插畫對用戶的視覺效果比普通攝影照片好7倍以上。除了網站首頁，新用戶引導、等待界面、進度頁面等情景中也可以運用插畫增加趣味性。
圖片來源：CrowdRise –Signupby EddieLobanovskiy
圖片來源：Rainbow Ridge / Music festivalby Mike | Creative Mints
2019年網頁設計趨勢之四：動態網頁背景
1. CSS3動效
動效這兩年崛起非常之迅猛，幾乎是網頁設計領域最強大的設計趨勢之一。無論是在設計師群體還是在用戶當中，它的受歡迎程度都非常之高。CSS3技術的運用使得傳統的網頁設計變得更加生動和易用。而由于動效在UI領域中算作新成員，所以CSS3動效設計在網頁設計中的應用還有更多的發展空間。那么，在2019年，CSS3動效在網頁設計中將會得到更多的運用和發展。
相關閱讀：8個最佳動效網頁設計，告別枯燥體驗！
圖片來源：Submit buttonby ClaudioScotto
2. 動態全屏視頻背景
運動的物體往往能更加吸引人的注意。那么想要吸引客戶注意的好方法之一就是創建一個帶有視頻背景的網站。相比文字或圖片，短小精致的視頻更能夠吸引用戶注意，為用戶提供更方便且豐富的信息，快速了解網頁或產品的特點。
對于SEO而言，視頻有助于增加用戶在網頁的停留時間，利于搜索引擎優化和提升轉換率。這一點，可以從Facebook對于視頻帖子的優先度可以得到驗證。并且，在多元化信息時代，視頻背景等動態元素在現代網頁設計中的應用趨勢會逐漸增加。
圖片來源：Mockplus iDoc, 更快更簡單的產品設計協同軟件
2019年網頁設計趨勢之五：極簡主義，簡約不簡單
作為最經典和永恒的網頁設計趨勢之一，極簡主義往往是“簡約”設計的首選。“少即是多”。這就是極簡主義的精髓。而將這個概念應用到網頁設計上，那么就是使用較少的界面設計元素實現影響巨大的簡約設計。簡約，而不簡單。
快速、動態的生活節奏使得現代人已經沒有足夠的時間去關注更多冗余的信息。那么體現在網頁設計上就是，越少的網頁元素，用戶思考的時間越少。無論是通過留白設計、對比度、還是清晰的排版設計，如果設計得當，一個簡約的網頁設計既可以使網頁易于瀏覽，為用戶提供準確的信息，也可以提供良好的用戶體驗。配合CTA，也更容易獲得較高的網頁轉化。
相關閱讀：極簡網頁設計技巧，打造簡約之美
圖片來源：Hosting & Domains - Web Designby Angel Villanueva
圖片來源:Minimalistic Product Pageby Vita Spenser
2019年網頁設計趨勢之六：響應式設計
近幾年響應式設計的流行使設計師們意識到這個響應式設計對于現代網頁設計的重要性。各種移動設備、平板電腦、電視、可穿戴設備或者臺式機等閱讀設備（通稱）的快速發展也更加肯定了響應式設計應該并且必須成為主流網頁設計趨勢之一。
自從2010年谷歌實現移動端響應式網站開始，移動端已經成為響應式網頁設計的首選。而現在移動用戶數量已遠遠超過桌面端用戶，谷歌也宣布改變算法，以便優先考慮移動優先索引。目的在于鼓勵企業更新響應式網頁設計，增強移動用戶的在線體驗。
相關閱讀：12個最佳的響應式網頁設計教程，輕松帶你入門！
圖片來源：Furniture Store Responsive Design Flowby Shakuro
圖片來源：Responsive Resize Kitby UI8
2019年網頁設計趨勢之七：鮮艷華麗的漸變設計
在過去的幾年里，越來越多的設計師在設計作品時采用了色彩漸變的方法，今年的流體漸變更是風靡全球。即使你只選擇了一種顏色，也可以在色彩漸變和不同圖片的幫助下，營造出豐富的層次結構感，繪制出一幅令人賞心悅目的畫面。鮮艷大膽的漸變色與插畫的結合，將是2019年的主流色彩搭配之一。
相關閱讀：2018年為什么漸變色重回主流設計趨勢？
圖片來源：Apple
圖片來源：Saving Animals Illustrationby Zahidul
2019年網頁設計趨勢之八：創意大膽的排版設計
網頁排版布局與界面上展示的內容同樣重要。有數據顯示，網頁中超過95%的信息都是以文字形式呈現。就對用戶產生的影響力而言，排版僅次于網頁配色和圖像。具冒險精神的大膽排版能使觀眾印象深刻，精心挑選的字體也可以傳遞所需的情緒，并建構強大的視覺層次結構。越來越多的大牌開始采用自己的專屬字體以提高品牌的辨識度及獨特性。
相關閱讀：文字如何實現完美UI？文本排版設計告訴你！
圖片來源：Rei.com - Landing Pageby Eddie Lobanovskiy
圖片來源：Melt Candle Co.by NathanRiley
小結：
網頁設計趨勢是全球設計師們共同關心的話題。隨著以上9大網頁設計趨勢在2019年更加現代的網頁設計中的運用，設計師們將發揮各自所長展現更加大膽和獨特的設計，讓人過目不忘。創意網頁設計并非不能預測，都是有跡可循的。緊密關注新的網頁設計趨勢，助你打造完美網站。
信很多自學的小伙伴都想學習web前端，可以關注小編后私信【學習】可以免費領取學習地址/案例教程/2018最新的一套學習教程，讓學習有方向。
1、三角形列表項目符號
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
2、外部CSS3 盒陰影
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
3、內部CSS3 盒陰影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
4、CSS3 斑馬線
tbody tr:nth-child(odd) {
background-color: #ccc;
}
5、強制出現垂直滾動條
html { height: 101% }
6、內容垂直居中
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
7、CSS3：全屏背景
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
8、錨鏈接偽類
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
9、為logo隱藏H1
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
}
10、自定義文本選擇
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
11、跨瀏覽器的透明
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
12、新版清除浮動（2011）
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
13、典型的CSS清除浮動
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
14、制造模糊文本
想要讓文本模糊？可以使用color透明和text-shadow實現
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
15、CSS：表格列寬自適用
對于表格，當談到調整列寬時，是比較痛苦的。然后，這里有一個可以使用的技巧：給td元素添加white-space: nowrap;能讓文本正確的換行
td {
white-space: nowrap;
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
