前端——CSS實用技巧

1、清除浮動

浮動給我們的代碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中我覺得最友善也是相容性最好的一種是….

1 2 3 4 5 6 7 8 9

// 清除浮動 .clearfix{ zoom: 1; } .clearfix:after{ display: block; content: ''; clear: both; }

2、垂直水準居中

在css的世界裡水準居中比垂直居中來的簡單一些，經過了多年的演化，依然沒有好的方式來讓元素垂直居中(各種方式各有優缺點，但都不能達到相容性好，破壞力小的目标)，以下是幾種常見的實作方式

絕對定位方式且已知寬高

1 2 3 4 5 6 7

position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em;

絕對定位 ＋ 未知寬高 ＋ translate

1 2 3 4 5

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); //需要補充浏覽器字首

flex 輕松搞定水準垂直居中( 未知寬高)

1 2 3

display: flex; align-items: center; justify-content: center;

3、 文本末尾添加省略号

當文本的内容超出容器的寬度的時候，我們希望在其預設添加省略号以達到提示使用者内容省略顯示的效果。

寬度固定，适合單行顯示...

1 2 3

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

寬度不固定，适合多行以及移動端顯示

1 2 3 4 5

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;

4、制造文本的模糊效果

當我們希望給文本制造一種模糊效果感覺的時候，可以這樣做

1 2	color: transparent; text-shadow:0 0 2px rgba(0,0,0,.5);

5、動畫實作簡潔loading效果

我們來實作一個非常簡潔的loading效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.loading:after{ display: inline-block; overflow: hidden; vertical-align: bottom; content: '\2026'; -webkit-animation: ellipsis 2s infinite; } // 動畫部分 @-webkit-keyframes ellipsis{ from{ width: 2px; } to{ width: 15px; } }

6、自定義文本選中樣式

預設情況下，我們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顔色(可以自己拿起滑鼠試試)，如果我們想自己定制被選中的部分的樣式呢？

1 2 3 4 5 6 7 8 9 10

// 注意隻能修改這兩個屬性 字型顔色 選中背景顔色 element::selection{ color: green; background-color: pink; } element::-moz-selection{ color: green; background-color: pink; }

7、頂角貼紙效果

有時候我們會有這樣的需求，在一個清單展示頁面，有一些清單項是新添加的、或者熱度比較高的，就會要求在其上面添加一個貼紙效果的小條就像hexo預設部落格的fork me on github那個效果一樣，如下圖。

接下來我們開始一步步完成最左邊的這個效果

html

1 2 3 4 5

<div class="wrap"> <div class="ribbon"> <a href="#" target="_blank" rel="external nofollow" >Fork me on GitHub</a> </div> </div>

css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

.wrap{ width: 160px; height:160px; overflow:hidden; position: relative; background-color: #f3f3f3; } .ribbon{ background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); left: -50px; top: 40px; } .ribbon a{ border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; text-shadow: 0 0 5px #444; }

8、input占位符

當我們給部分input類型的設定placeholder屬性的時候，有的時候需要修改其預設的樣式。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

input::-webkit-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } input::-moz-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } input::-ms-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; }

9、移動端可點選元素去處預設邊框

在移動端浏覽器上，當你點選一個連結或者通過Javascript定義的可點選元素的時候，會出現藍色邊框，說實話，這是很惡心的，怎麼去掉呢?

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

10、首字下沉

要實作類似word中首字下沉的效果可以使用以下代碼

1 2 3 4 5

element:first-letter{ float:left; color:green; font-size:30px; }

11、小三角

在很多地方我們可以用得上小三角，接下來我們畫一下四個方向的三角形

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.triangle{ border:solid 10px transparent; } .triangle.bottom{ border-top-color: green; } .triangle.top{ border-bottom-color: green; } .triangle.top{ border-right-color: green; } .triangle.top{ border-left-color: green; }

可以看出畫一個小三角非常簡單，隻要兩行樣式就可以搞定，對于方向隻要想着畫哪個方向則設定反方向的樣式屬性就可以

12、滑鼠手型

一般情況下，我們希望在以下元素身上添加滑鼠手型

• a
• submit
• input[type=”iamge”]
• input[type=”button”]
• button
• label
• select

1 2 3

a[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button { cursor: pointer; }

13、屏蔽Webkit移動浏覽器中元素高亮效果

在通路移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用以下代碼屏蔽這種樣式

1 2 3 4 5 6

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

版權聲明：本文為CSDN部落客「weixin_33834679」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_33834679/article/details/91773575