CSS 實用 Tips

作為前端，日常開發充滿了各種挑戰與樂趣，我們窮盡一切在奇葩的需求中提升用戶體驗。本文將列舉一些前端開發中碰到的小眾需求，並提供解決方案以供參考。

一、修改滑鼠手勢圖標

很多童鞋可能都用過：

1. cursor: pointer | wait | hand | text | move | not-allowed;

但是，它還支持用戶自定義圖片，你知道嗎？

1. cursor: url(jartto.cur), url(http://jartto.wang/jartto.gif), auto;

下圖為各瀏覽器支持情況：

記得在定義完自定義的游標之後在末尾加上一般性的游標，以防那些url所定義的游標不能使用。

二、box-shadow 三邊陰影

box-shadow 大家都不陌生，我們一般這麼用：

1. box-shadow: h-shadow v-shadow blur spread color inset;

可是三邊陰影該如何設置呢？請不要忽視設計師的腦洞??：

1. #shadowBox {
2. background-color: #ddd;
3. margin: 0px auto;
4. padding: 10px;
5. width: 220px;
6. box-shadow: 0px 8px 10px gray,
7. -10px 8px 15px gray, 10px 8px 15px gray;
8. }

三、超好用的 currentColor

先來舉個例子，html代碼：

1. <a href="##" class="link"><i class="icon"></i>返回</a>

css 代碼：

1. .icon {
2. display: inline-block;
3. width: 16px;
4. height: 20px;
5. background-image: url(http:jartto.wang/test.png);
6. background-color: currentColor; /* 該顏色控制圖標的顏色 */
7. background-position: 0 0;
8. }
9. .link:hover {
10. color: #333; /* 雖然改變的是文字顏色，但是圖標顏色也一起變化了 */
11. }

currentColor 表示「當前的標籤所繼承的文字顏色」

四、png 圖片如何改顏色

網頁中大多使用透明圖片 png 格式，可是如果有天產品經理說，這個圖標顏色能不能改成紅色，恰巧設計師不能支持你，你該如何辦？ 其一：自己重新 ps 一下圖片，換個顏色； 其二：只能上 svg 嘍，搞成 icon font；

這裡，我們來說第三種方式，妙不妙可以試試哦！

1. .icon {
2. display: inline-block;
3. width: 20px;
4. height: 20px;
5. overflow: hidden;
6. }
7. .icon-del {
8. background: url(delete.png) no-repeat center;
9. }
10. .icon > .icon {
11. position: relative;
12. left: -20px;
13. border-right: 20px solid transparent; /*下文注意點 2 有解釋*/
14. -webkit-filter: drop-shadow(20px 0);
15. filter: drop-shadow(20px 0);
16. }

html 代碼:

1. <p><strong>原始圖標</strong></p>
2. <i class="icon icon-del"></i>
3. <p><strong>可以變色的圖標</strong></p>
4. <i class="icon"><i class="icon icon-del"></i></i>

需要注意幾點： 1.對於背景透明的 png 小圖標而言，如果我們施加一個不帶模糊的投影，就等同於生成了另外一個顏色的小圖標； 2.在 chrome 瀏覽器下，如果一個元素的主體部分，無論以何種方式，只要在頁面中不可見，其 drop-shadow 是不可見的。實體部分哪怕有 1px 可見，則 drop-shadow 完全可見。

原理其實很簡單，使用了 css3 濾鏡 filter 中的 drop-shadow， drop-shadow 濾鏡可以給元素或圖片非透明區域添加投影。

五、vh 與 vw

相對於視口的寬度。視口被均分為 100 單位的 vw， vh 同理。

我一般會在強制某一個容器佔一整屏的時候使用，如：

1. .box{
2. height: calc(100vh - 50px);
3. }

視口高度減去頁頭固定區域，剩下的高度設置給容器。當然，我們也可以用它設置大小，如下：

1. h1 {
2. font-size: 8vw;
3. }

如果視口的寬度是 200mm，那麼上述代碼中h1元素的字型大小將為 16mm，即 (8x200)/100

值得注意的是， less 中使用需要加 ～

1. min-height: ~"calc(100vh - 68px)";

此外，還有一些如 ch ， vmax， vmin 等屬性等著你去擴展

六、如何去掉 chrome input 的背景黃色

當我們在做登陸頁面的時候，在 chrome 中 input 會帶上自動補全的黃色背景，大大影響美觀。很多網站都沒有去處理，但這並不難處理。作為高逼格的前端，這裡就可以體現出你的價值，解決方案如下：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
3. }

當然，你也可以使用方案二，如下：

1. input:-webkit-autofill {
2. -webkit-animation-name: autofill;
3. -webkit-animation-fill-mode: both;
4. }
5. @-webkit-keyframes autofill {
6. to {
7. color: #fff;
8. background: transparent;
9. }
10. }

七、chrome 中設置小於 12px 的字體

這種改小字體，絕大部分肯定都是設計師的需求，因為小顯得精緻。

1. ant-checkbox-wrapper {
2. cursor: pointer;
3. font-size: 10px;
4. display: inline-block;
5. -webkit-text-size-adjust: none; // 不支持
6. transform: scale(0.9);
7. }

八、0.5px border 如何操作

現行方法大致有如下幾條： 1.使用漸變 linear-gradient 來操作，但需要注意瀏覽器兼容前綴；

1. .div::after {
2. content: " ";
3. position: absolute;
4. left: 0;
5. top: 0;
6. width: 100%;
7. height: 1px;
8. background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
9. }

2.縮放 scale 處理：

1. div::after{
2. content: "";
3. display: block;
4. position: absolute;
5. left: -50%;
6. bottom: 0;
7. width: 200%;
8. height: 1px;
9. background: #c3c3c3;
10. -webkit-transform: scale(0.5);
11. }

3.使用 background-image 和 css3 的九宮格裁減

1. .bd-t::after {
2. content: " ";
3. position: absolute;
4. left: 0;
5. top: 0;
6. width: 100%;
7. border-top: 1px solid transparent;
8. /* 下面用 stretch 和 round 都可以 */
9. border-image: url(pic.png) 2 1 1 1 stretch;
10. -webkit-border-image: url(pic.png) 2 1 1 1 stretch;
11. }

九、border 顏色漸變

1. border-color:red green blue pink;

「border-width」 屬性如果單獨使用的話是不會起作用的。請首先使用 「border-style」 屬性來設置邊框。

十、css3 畫小箭頭

這裡推薦兩種方式： 其一，通過 border 來實現

1. /*箭頭向上*/
2. .arrow-up {
3. width:0;
4. height:0;
5. border-left:30px solid transparent;
6. border-right:30px solid transparent;
7. border-bottom:30px solid #fff;
8. }
9. /*箭頭向下*/
10. .arrow-down {
11. width:0;
12. height:0;
13. border-left:20px solid transparent;
14. border-right:20px solid transparent;
15. border-top:20px solid #0066cc;
16. }

其二，拼湊法（偽類或元素），將 div 隱藏兩邊或設置 z-index，然後旋轉，放到合適位置。

1. div {
2. position: absolute;
3. bottom: -2px;
4. left: 7px;
5. width: 10px;
6. height: 10px;
7. transform: rotate(-45deg);
8. z-index: -1; /* 放在容器後，被遮蓋住*/
9. }

比較簡單，就不贅述了。

十一、有趣的 drop-shadow

用法如下：

1. filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
2. filter:drop-shadow(5px 5px 10px black)

CSS3 濾鏡 filter 中的 drop-shadow，drop-shadow 濾鏡可以給元素或圖片非透明區域添加投影。

上文中已經提到了一種使用場景，這裡還想說另一種，即使用拼湊法作出的小氣泡，如果氣泡需要陰影的話，請用 drop-shadow 來替代 box-shadow。

十二、修改瀏覽器默認滾動條

有時候一些不期而遇的滾動條會讓頁面很尷尬，這時候你還可以強行美化一下，參考代碼如下：

1. /*滾動條 start*/
2. ::-webkit-scrollbar {
3. width: 1px;
4. height: 4px;
5. background-color: #F5F5F5;
6. }
7. /*定義滾動條軌道 內陰影+圓角*/
8. ::-webkit-scrollbar-track {
9. box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
10. background: #fff ;
11. }
12. /*定義滑塊 內陰影+圓角*/
13. ::-webkit-scrollbar-thumb {
14. border-radius: 3px;
15. box-shadow: inset 0 0 6px rgba(0,0,0,.3);
16. // background-color:rgba(7, 170, 247, 0.7);
17. background-color: transparent;
18. }
19. ::-webkit-scrollbar-thumb:hover {
20. border-radius: 3px;
21. box-shadow: inset 0 0 6px rgba(0,0,0,.3);
22. background-color:rgba(7, 170, 247, 1);
23. }

十三、safari placeholder bugs

在項目中遇到 input 的 placeholder 在 safari 下設置行高失效的問題，解決思路如下： 1.使用 padding 使提示文字居中，如果 font-size:14px, UI 高度為 40px,我們可以設 height：14px,padding:13px 0; 2.使用 line-height:1px; 3.使用 vertical-align: middle;

補充一條：Safari 來寫 hack 即 [;line-height:1;]

十四、總結

這些都是在我日常開發中碰到的奇葩問題，回頭想想其實挺有意思，遂整理總結之。如果日常開發中沒有一些挑戰，那開發還有什麼樂趣。

http://jartto.wang/2017/11/12/f2e-tips

推薦閱讀：