整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
方的冬天最怕有風，空氣雖然好了，但是異常的冷，吸幾口冷風感覺肺都結了冰。一大早小白來到辦公室琢磨用戶交互方面的問題，看了幾個網站發現很多網站的彈窗都是自定義的，而且還把彈窗周圍的區域做成了半透明狀，看上去非常不錯。于是小白也準備自己通過css布局一個彈窗試試，一來以后肯定會用上這個功能，二來熟悉一下最近掌握的CSS+HTML布局。
說干就干，小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器，然后里面放了窗口容器（dialog），窗口容器里面還包含了三個子容器，分別是標題（layerTitle）、內容區域（layerContent）、按鈕區域（layerBTContainer）。
小白想：“layer要充滿并遮擋整個瀏覽器窗口，而且滾動頁面它還得一直保持遮擋的狀態，把它設置為浮動類型（position:fixed）的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置，因此最好把dialog設置成固定寬度和高度，這樣可以很好的實現居中。”，于是小白先把layer和dialog以及dialog內部的容器設定了一個初步的CSS樣式。
layer的position設置為fixed，上下左右距離都設置成0，就可以達到占用整個窗口。里面的dialog容器小白根據剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位，設置上下左右距離都為0它會占用整個父容器區域，但是如果CSS中限制了dialog的寬和高并且設置了marin為auto，它就會基于父容器居中。
為了測試transition屬性，小白還把確定按鈕上面設置了一個鼠標移上去以后漸變的效果，做完以后就是這個樣子：
看到布局好的彈窗小白心里非常高興，突然他想到一個問題，這個彈窗背景還沒設置半透明，于是趕緊往layer上增加了opacity:0.5這個半透明屬性，小白滿懷信息的刷新了頁面，當看到結果時小白發現背景和窗口都變成了半透明。
正好這時老朱從小白身邊經過，隨口跟小白說了一句：“小白，你是不是把窗口的父容器設置成半透明了？”
“是啊！父容器背景是黑色，所以我把父容器設置成了半透明！”
“可是父容器設置半透明會對他的子元素產生影響啊，這樣會導致它里面的所有元素都變成半透明，你為啥不給窗口添加一個兄弟容器來實現這個效果呢？”
小白仔細想了想，說道：“哦！我明白了，我可以在layer容器里面放一個跟layer一樣大的容器，這樣就不會沖突了，我再試試！”
不一會小白找到老朱，說道：“我改好了，現在我給dialog添加了一個layerbg容器作為背景層，然后把layer之前的背景色和透明度去掉，放到了新增加的背景層上面，背景層高和寬與layer一樣所以這樣就不會把dialog也變成半透明了。你看看效果。”
老朱說：“嗯！不錯，你現在通過HTML和CSS布局的這個彈窗還能做很多完善，比如出現彈窗時增加一個動畫效果、給它添加一個關閉按鈕或者取消按鈕等等。除了提示功能以外，你現在做的這個還能再進行深入修改，把它變成可以輸入文字的prompt框，點擊確定以后可以對頁面或者數據庫數據進行修改。”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！
家好，我是大澈！
本文約 800+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優質代碼片段。
今天分享一段優質 CSS 代碼片段，實現 CSS 文字鏤空的效果。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文字鏤空</title>
<style>
div {
margin: 10% auto;
font-size: 60px;
font-weight: bold;
text-align: center;
/*字體粗細*/
-webkit-text-stroke: 1px red;
/*描邊*/
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>文字鏤空</div>
</body>
</html> 分享原因
這段代碼展示了如何使用 CSS 為文本添加描邊效果和透明填充顏色，從而實現有趣的文字鏤空視覺效果。
它展示了現代 CSS 特性的使用，讓我們使用幾行代碼，就可以輕松實現較復雜的樣式效果。
在項目中確實可能會用到，到時候直接來CV即可。
我越來越覺得，CSS真的是 yyds ！
代碼解析
1. margin: 10% auto;
將元素的上下邊距設置為父元素高度的10%，左右邊距自動，這樣可以將元素在水平方向居中，在垂直方向看著也比較舒服。
2. -webkit-text-stroke: 1px red;
為文本添加1像素寬的紅色描邊。
-webkit-text-stroke 是一個非標準的 CSS 屬性，用于在 WebKit 內核瀏覽器中為文本添加描邊效果。
它由兩個部分組成：描邊的寬度和描邊的顏色。這個屬性可以創建一些特別的視覺效果，如在黑色背景上用白色描邊的文字等。
這是一個 WebKit 特性，所以帶有 -webkit- 前綴。此屬性在支持 WebKit 內核的瀏覽器中有效，例如 Chrome 和 Safari。
3. -webkit-text-fill-color: transparent;
將文本的填充顏色設置為透明。
-webkit-text-fill-color 也是一個非標準的 CSS 屬性，用于在 WebKit 內核瀏覽器中設置文本的填充顏色。
這個屬性與標準的 color 屬性類似，但它的設計目的是與 -webkit-text-stroke 一起使用，以提供更高級的文本樣式。
這同樣是一個 WebKit 特性。
- end -
素的顯示與隱藏
使用CSS讓元素不可見的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見，但背后卻在多個維度上都有差別
下面是總結的一些比較好的隱藏實踐，大家一起來根據實際開發場景來選擇合適的使用
比較好的隱藏實踐
不占空間，資源可以加載，DOM可訪問 使用display:none
不占空間，隱藏顯示時有transition效果
占空間，不能點擊 visibility: hidden
不占空間，不能點擊，鍵盤能訪問 clip裁切
占空間，不能點擊，鍵盤能訪問 relative
占空間，可以點擊 opacity
隱藏文字 使用text-indent
根據實際的隱藏場景選擇合適的隱藏方法，這里就不再多說了，接著往下看吧
display與元素的顯隱
我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了
display可以說是web顯隱交互中出場頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡
none做到了無法點擊、無法使用屏幕閱讀器等輔助設備訪問，不占空間，其實不僅僅是這樣，更應該知道的是
me: 我有酒，那么別說你沒有故事
我知道display:none你才不是一個沒有故事的女同學
display: none的元素的background-image圖片根據不同瀏覽器的情況加載情況不一
在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此在Chrome和Safari瀏覽器，則根據父元素是否是否為none來影響圖片加載情況，父元素帶有display:none，圖片不加載。
父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載
3.在IE瀏覽器下，無論怎么搞都會請求圖片資源，就是這么任性
因此，在實際開發的時候，例如頭圖輪播切換效果
那些默認需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細小改動就可以明顯提升頁面的加載體驗，也是非常實用的小技巧
whatever
上面說的興致盎然，但實際中不可能全部都是背景圖去加載圖片資源的
還有另外一個好朋友，img元素，然并卵的是，上面說了一大堆加載不加載的情況，對img來說沒個鳥用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請求著資源
活久見
都說display:none做事最純粹，最干凈，不能被點擊，觸碰到，然而下面這種情況又是什么鬼？
出來解釋解釋，我們都是文明人是絕對不會動武的！
隱藏的按鈕會觸發click,觸發表單提交，此現象出現在時髦的瀏覽器中(IE9+，現代標準瀏覽器中）
既然有這種例外情況那加了display:none的意義又是什么呢？
很多都是純天然的
HTML中有很多標簽和屬性天然自帶display:none
HTML5中新增了hidden這個布爾屬性，可以讓元素天生隱藏起來
既然說到了visibility了，那么就趕緊邀請visibility閃亮登場吧
visibility與元素的顯隱
visibility要為自己正名，不僅僅是保留空間這么簡單
看點多多：
繼承性(最有意思的一個特點，不是我說的)
2. 與css計數器
visibility:hidden雖然讓元素不可見了，但是不影響其計數效果，不會重新計算結果
3. 與transition
設置了visibility:hidden的元素，可以很好的展現transition過渡效果
這是因為transition支持的css屬性中有visibility(果然是兄弟)，而并沒有display屬性
4.與JS
visibility:hidden除了對transition友好外，對js來說也很友好
在實際開發中，需要對隱藏元素進行尺寸和位置的獲取，來實現布局精確定位的交互
此時，就建議使用visibility:hidden
好了以上內容要告一段落了，我們繼續開始新的征程吧，哈哈
用戶界面樣式
用戶界面樣式指的是CSS世界中用來幫助用戶進行界面交互的一些CSS樣式，主要有outline和cursor等屬性
和border形似的outline屬性
outline表示元素的輪廓，語法也和border一樣，分為寬度、類型和顏色三個值
樣式表示上相同，但是設計的初衷卻是不太相同的，這一點天地日月可鑒
outline是一個和用戶體驗密切相關的屬性，與focus狀態以及鍵盤訪問密切相關
對于按鈕或鏈接，通常的鍵盤操作是：Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素)，或者focus設置了tabindex的普通元素，然后按Shift+Tab是反向訪問
重點來了！
默認狀態下，對于處于focus狀態的元素，瀏覽器會通過發光or虛框的形式進行區分和提示，這是友好的用戶體驗，很有必要，不然用戶很難知道自己當前聚焦在了哪個元素上面，會迷失自我
元素如果聚焦到了a鏈接上，按下回車鍵就會跳轉到相應鏈接，以上的交互都是基于鍵盤訪問的，這就是為什么outline和鍵盤訪問如此親密了
不專業的行為
很多時候直接在reset樣式的時候，寫成如下形式是非常不可取的
這樣直接一竿子打死一群鴨子的做法是不對的，更多的時候是因為瀏覽器內置的focus效果和設計風格格格不入，才需要重置，而且要使用專門的類名
最后再強調一遍：萬萬不可在全局設置outline: 0 none;
這樣的操作會造成鍵盤訪問的時候用戶找不到當前焦點，容易產生困擾的，為了大家好，收斂一下吧
下面來點干貨: 在實際開發中，有時候需要讓普通元素代替表單控件元素有outline效果
舉個栗子：submit按鈕來完成UI設計是非常麻煩的，所以使用label元素來移花接木，通過for屬性和這些原生的表單控件相關聯
真正的不占據空間的outline及其應用
outline是一個真正意義上不占任何空間的屬性，Amazing
頭像剪裁的矩形鏤空效果
先來看個效果圖
上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨
用一個大大的outline來實現周圍半透明的黑色遮罩，因為outline無論設置多么多么大，都不會占據空間影響布局，至于超出的部分，直接給父元素設置一個overflow:hidden就搞定了 注意：
自動填滿屏幕剩余空間的應用技巧
開發中很多時候，由于頁面內容不夠多，導致底部footer會出現尷尬的剩余空間，解決方法往往也有很多種，在此我們還是依然利用outline的功能來完美實現一下
關鍵的css就是設置一個超大輪廓范圍的outline屬性，如給個9999px，保證無論屏幕多高，輪廓顏色都能覆蓋
值得注意的是，outline無法指定方位，它是直接向四周發散的，所以需要配合clip剪裁來進行處理,以左邊和上邊為邊界進行裁剪
光標屬性
光標屬性cursor我們真的是最熟悉的陌生人啊
為什么這么說呢，因為在眾多的屬性值面前，我們似乎只用到了pointer(手形)(最常用的，沒有之一)，move(移動)，default(系統默認)這幾樣
在cursor的世界里，遠比我們想象的要豐富很多，下面按照功能特性來對其進行分類吧
琳瑯滿目的cursor屬性值
友情不友情的小提示：☆（表示常用）
鏈接和狀態
cursor: progress; 進行中
選擇
拖拽都是CSS3新增的光標類型
以上內容就介紹完了用戶界面樣式的全部內容了，還有最后一章的冷知識，大家不要方，繼續看下去，了解一下，了解一下，了解一下
流向的改變
說出來你可能不信，direction可以改變水平流向，盡管知道或者使用過的人少之又少，但并不妨礙它的發光發熱
而且屬性簡單好記，值少，兼容極好ie6支持，可以來挖掘一下它的神奇功效
direction
僅僅兩個值：
direction: rtl;
當然看到這里你可能會感覺，這些說起來都沒什么鳥用，因為大招是不輕易放出的，而真正有用的地方在于改變網頁布局的時候
direction屬性默認有一個特性
可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現順序
舉個例子：顛倒順序
再舉個例子：
比如制作彈窗組件的時候，確認和取消按鈕有的時候會根據用戶的使用行為會顯示在不同的位置
下面來看看這種特性的表現在實際開發中的作用
windows用戶看到的樣子
好了，direction的話題就告一段落，接下來介紹最后一個知識了，堅持住，快休息了
writing-mode
改變CSS世界縱橫規則的writing-mode，如此強大的功能，居然沒有被大家發掘和廣發應用起來，實屬遺憾了，話不多說，往下看
writing-mode作用及真正需要關注的屬性值
writing-mode可以改變排版，變成垂直流，如下圖所示
在使用語法上，也是需要記兩套的，一套是IE私有屬性，一套是CSS3規范屬性
CSS3語法：
IE語法：
針對實戰版來整理一份writing-mode是這樣的
對于垂直排版來說，實際開發是很少會遇到的，不過還是要說說writing-mode帶來的改變
水平方向也能margin合并
我們都知道兩個相鄰的元素垂直的margin會合并，當元素變為垂直流的時候，水平的margin也會合并
普通塊元素可以使用margin: auto實現垂直居中
text-align:center實現圖片垂直居中(同上實現的效果）
實現全兼容的icon fonts圖標旋轉效果
老IE下讓小圖標旋轉很麻煩，writing-mode把文檔變成垂直流的時候，英文、數字和字符號都天然的轉了90°
@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也沒問題
好了，這就是《CSS世界》里最后三章的全部內容了，終于寫完了，哈哈，希望大家有收獲一些冷知識。
簡單說兩句
做個個人的小總結吧：
css有很多奇妙的地方，在某些特性當初被設計出來的時候可能只是為了某些圖文排版而生
但是我們可以利用它們帶來的特性發揮自己的創造力，實現其他很多意想不到的效果，因此，上面所講述的所有知識點，盡管很多內容都有點奇技淫巧以悅婦孺的過程
但這也給我們開發的過程中，提供了一些很出奇的妙招，值得我們好好學習領悟
感謝個位的觀看了，再見了，哈哈
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
