整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
般我們在做頁面涉及字體的時候，最多就是換個color換個font-family，在空閑時間之時，我們可以自己動手，看看能不能“創造”出一些CSS字體樣式呢～體現下字體的文藝范！下面就來說說有關css美化文字的一些常見做法！
透明文字：
用rgba調整透明度
用opacity調整遮罩
這兩者區別是用rgba只是對文字有透明度，而opacity對整個div都有遮罩影響
模糊文字
可以用text-shadow喝-webkit-text-fill-color組合，得出模糊文字，如下：
鏤空文字
可以用-webkit-text-stroke來給文字外圍描邊，然后在把文字的填充顏色設置為透明，這樣就能只顯示出文字的外圍的描邊
漸變文字
background可以做到漸變顏色
圖片背景文字
在一些網站經常看到類似于這樣炫酷的效果
以上就是今天要說的一些CSS美化文字方法，還有很多方法，等一一總結出來再給小伙伴們看，謝謝大家支持！
素的顯示與隱藏
使用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有很多奇妙的地方，在某些特性當初被設計出來的時候可能只是為了某些圖文排版而生
但是我們可以利用它們帶來的特性發揮自己的創造力，實現其他很多意想不到的效果，因此，上面所講述的所有知識點，盡管很多內容都有點奇技淫巧以悅婦孺的過程
但這也給我們開發的過程中，提供了一些很出奇的妙招，值得我們好好學習領悟
感謝個位的觀看了，再見了，哈哈
、首字母大寫
::first-letter 偽類選擇器用來指定元素第一個字母的樣式。
2、透明圖片陰影
相信你一定用過box-shadow屬性給盒子設置陰影吧，但是當你想要給透明圖片添加陰影的時候，卻看起來像加了個邊框！這時候神奇的drop-shadow就派上用場了。
drop-shadow 的工作方式是，其遵循給給定圖片的 Alpha 通道。因此陰影是基于圖片的內部形狀，而不是顯示在圖片外面。
3、鏤空文字
-webkit-text-stroke: 1px #1e80ff;
注意：鏤空文字屬性ie瀏覽器不兼容
4、背景文字
利用background-clip: text;規定背景的繪制區域，再把文字顏色設置為透明實現。
5、網頁灰度效果
grayscale(amount)函數將改變輸入圖像灰度。amount 的值定義了灰度轉換的比例。值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。若未設置值，默認值是 0。（如下鼠標懸浮體驗效果）
6、flex布局最后一行左對齊
方法1：使用js補齊元素，例如，每行展示3個元素，現在一共有5個元素，那么我們就可以在最后補一個同寬度的透明元素。
方法2：justify-content設置為space-between實現兩端對齊效果，最后一行再特殊處理：思路為選中最后一個元素，設置其右邊距，擠到只能容納最后一行元素的寬度。
方法3：justify-content設置為flex-start,先將全部元素左對齊，然后計算出每個元素的間距，通過gap設置元素間距(如果行列間距不同，可以用column-gap設置列間距，row-gap設置行間距)，偽裝實現兩端對齊的效果。
7、毛玻璃背景效果
使用backdrop-filter與filter都可以寫出高斯模糊的效果，但是兩者使用起來還是有區別的，而且使用的目標也不同。
區別：
backdrop-filter：使背景模糊，不會影響到背景下面的圖片
filter：通常是定義 img的可視效果，修改圖片的模糊效果，值越大越模糊
8、inline元素間的空白間隙
行內元素排列的時候，明明沒有邊框，也沒有間距，但就是有空隙。
其實間隙是由換行或者回車導致的，你可以將標簽代碼都寫同一行即可解決。但是這樣有點呆，我們可以通過設置父元素的font-size為0將空隙縮小到0。
9、文字溢出省略
單行文本：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;（多少行省略）
overflow: hidden;
注意：ie不兼容，可用min-height：省略的行數*行高 來解決；
10、列表除最后一個元素外，其他元素統一樣式
一般這種情況，我們可以先全部統一樣式，然后再單獨設置最后一個元素樣式覆蓋公共樣式。
也可以用 :not 選擇器直接設置除了最后一個元素的樣式。
:not(selector) 選擇器匹配每個元素是不是指定的元素/選擇器。
11、隱藏滾動條
.element::-webkit-scrollbar {
display: none;
}
12、禁止用戶選擇
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
13、暫停動畫
animation-play-state可以控制動畫狀態
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
