CSS黑科技補充篇

JellyBool發表於2015-07-29
CSS

原文來自：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修飾中文文字可能沒有很大的用處，不過我看到這個時候其實還是覺得比較意外的，竟然還有這個東西：



<div class=`text`>
    I am sample text
</div>

然後CSS可以這樣寫：

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

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

Happy Hacking

相關文章