CSS黑科技補充篇

LeanCloud 發布于2019-08-28 18:11 / 2150人閱讀

摘要：原文來自繼上一次寫的黑科技之后，這次貌似還專門去找了一些中可能還是比較不太會引起開發者注意的屬性。其實在中，你可以使用這個屬性來指定相應的樣式，比如上面這一行聲明就可以將元素中的空單元格隱藏起來。暫時就補充這么多

原文來自：https://jellybool.com/post/css-that-you-may-not-know-part-2

繼上一次寫的CSS黑科技之后，這次貌似還專門去找了一些CSS中可能還是比較不太會引起開發者注意的屬性。

empty-cells

其實在table中，你可以使用empty-cells這個屬性來指定相應的樣式，比如：

table {
  empty-cells: hide;
}

上面這一行聲明就可以將table元素中的空單元格隱藏起來。

border-image

其實這個在開發中可能會比較少見到，如果不是我特意去看文檔，真心不會發現還有這個border-image，沒錯，就如名字的意思一樣，你可以給border指定image：

.border-image-example {  
    -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat;  
    -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat;  
    border-image: url(border-image.jpg) 45 20 45 30 repeat;
}

text-decoration

在習慣了對text-decoration賦值為none之后，我們需要重新來認識一下這一位小伙伴了，它其實是可以接受三個變量聲明：

a {
  text-decoration: overline aqua wavy;
}

這三個分別是代表：text-decoration-line， text-decoration-color 和 text-decoration-style

clip

可能很多人在剛開始使用clip的時候都是這樣寫的：

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

然后很驚訝地發現竟然沒有起作用，為什么呢？所以在這里需要注意的地方是clip是只在position為absolute或position為fixed時候起作用的。

::first-letter

這個感覺比較神奇，雖然對于我們常用CSS修飾中文文本可能沒有很大的用處，不過我看到這個時候其實還是覺得比較意外的，竟然還有這個東西：




    I am sample text

然后CSS可以這樣寫：

.text::first-letter {
  color: blue;
  background: yellow;
}

第一個字母I就會被修飾到，很神奇。暫時就補充這么多....

Happy Hacking

GPU云服務器云服務器 cdn補充 html 自動補充黑科技人工智能的黑科技

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111077.html

## CSS 的黑科技

摘要：所以在使用屬性選擇器的時候，注意大小寫問題。目前就只覺得這些黑科技需要提醒自己一下，有可以補充。原文來自：https://jellybool.com/post/css-that-you-may-not-know 補充篇在這里 http://segmentfault.com/a/1190000003029085 昨天由于某些原因沒有寫博客，之前說好的每天一篇的，這篇...

wh469012917 2019-08-28 18:12 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
細數 JavaScript 實用黑科技(二)

摘要：前言書接上文細數實用黑科技一本文介紹獨孤九劍和兩篇最高內功心法。可以將變量轉換為布爾值。可以把任何類型的值轉換為布爾值，并且只有當這個變量的值為的時候才會返回，其他情況都返回。同樣的，函數體內部聲明的函數，作用域綁定函數體內部。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言書接上文：細數 JavaS...

馬忠志 2019-08-23 12:07 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

Berwin 2019-08-01 17:42 評論0 收藏0