資訊專欄INFORMATION COLUMN
摘要：所以在使用屬性選擇器的時候，注意大小寫問題。目前就只覺得這些黑科技需要提醒自己一下，有可以補充。
原文來自：https://jellybool.com/post/css-that-you-may-not-know
補充篇在這里 http://segmentfault.com/a/1190000003029085
昨天由于某些原因沒有寫博客，之前說好的每天一篇的，這篇是為了補昨天的了。然后我就要當一次標題黨了。這里的黑科技其實就是一些CSS中不怎么為人所知但在解決某些問題的時候很溜的屬性。
border-radius很多開發者估計都沒有正確認識這個border-radius，因為基本上很多人都是這么用的：
.box {
border-radius: 4px;
}
稍微高端一點的是這樣的：
.box {
border-radius: 4px 6px 6px 4px;
}
然而，終極黑科技是這樣用的：
.box {
border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
對，它可以賦8個值，沒見過？不著急，具體的解釋是這樣的：
斜線前面的影響的是水平方向，斜線后面影響的是垂直方向，各個數字就分別代表四個不一樣的方向。outline-offset
相信很多開發者在寫CSS的時候對下面的語句會很熟悉：
input {
outline : none;
}
input:focus {
outline : none;
}
這就是將input輸入框去掉默認的藍線框的方法。其實，這里還有說一個就是，CSS中還有一個outline-offset屬性，在這個屬性中，你可以設置默認線框的距離；像這樣
input {
outline-offset: 4px ;
}
調節該屬性值的大小你就可以看到outline的距離變化了。
類的聲明對于下面的類的聲明，可能大家都很熟悉：
.col-8 {
}
這當然沒什么，但是如果你這樣寫呢：
.? {
color: hotpink;
}
.★ {
color: yellow;
}
嗯，看起來怎么樣，你是可以這么用的：
只要是Unicode的，你都可以這么來聲明你的類。
選中連續的幾個元素
ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
background: lightpink;
}
上面的這種寫法其實就可以達到選中ol下面的第七到第十四個li元素。
偽類設置單標簽html中有幾個常見的單標簽：
,
等。具體可以查看這里：
http://www.w3.org/TR/html5/syntax.html#void-elements
下面的示例是實現對
的修飾。
hr:before {
content: "??";
}
hr:after {
content: " This is an
element";
}
沒錯，關鍵就是使用:before和:after這兩個偽類。在這里，順便說一點就是，其實你還可以用這兩個偽類來修飾 和 ，不過這個前提是，你把這兩個的display屬性設置為：
display: block屬性區分大小寫
假如我們在寫html的時候有類似下面的代碼：
然后我們用屬性選擇器進行CSS修飾：
div[class="box"] {
color: blue;
}
input[type="email"] {
border: solid 1px red;
}
這樣的聲明方式毫無疑問地就會生效。然而，如果我們聲明成下面這個樣子，結果會是怎么樣的呢：
div[class="BOX"] {
color: blue;
}
input[type="EMAIL"] {
border: solid 1px red;
}
這變成了大寫之后，第一個class="BOX"并不會影響到,而第二個type="EMAIL"還是會正常修飾。所以在使用屬性選擇器的時候，注意大小寫問題。
目前就只覺得這些CSS黑科技需要提醒自己一下，有可以補充。
Happy Hacking
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111081.html
摘要：最近數月一直投身于的開源工作中，完成了大大小小多個組件，在組件化開發中積累了不少經驗。在開發全局提示組件通知提醒組件對話框組件時，內部都是使用來渲染，但卻是來隱式地創建這些實例，這樣我們就可以像標題這樣使用，但其內部還是通過來管理。 最近數月一直投身于 iView 的開源工作中，完成了大大小小 30 多個 UI 組件，在 Vue 組件化開發中積累了不少經驗。其中也有很多帶有技巧性和黑科...
摘要：最近數月一直投身于的開源工作中，完成了大大小小多個組件，在組件化開發中積累了不少經驗。在開發全局提示組件通知提醒組件對話框組件時，內部都是使用來渲染，但卻是來隱式地創建這些實例，這樣我們就可以像標題這樣使用，但其內部還是通過來管理。 最近數月一直投身于 iView 的開源工作中，完成了大大小小 30 多個 UI 組件，在 Vue 組件化開發中積累了不少經驗。其中也有很多帶有技巧性和黑科...
摘要：本篇文章將給大家帶來一個的黑科技如何僅僅使用來實現全景圖的效果最終效果演示頁面布局基礎樣式首先定義一些基本的樣式和動畫這段代碼的意思是讓圖片的高等于容器的高，并且水平方向自動，即圖片最左邊貼著容器左側。 本篇文章將給大家帶來一個css3的黑科技：如何僅僅使用css來實現全景圖的效果？ 最終效果演示：demo 頁面布局 基礎樣式 首先定義一些基本的樣式和動畫 .panorama { ...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
閱讀 3023·2023-04-26 00:32
閱讀 507·2019-08-30 15:52
閱讀 2114·2019-08-30 15:52
閱讀 3356·2019-08-30 15:44
閱讀 3288·2019-08-30 14:09
閱讀 1423·2019-08-29 15:15
閱讀 3401·2019-08-28 18:12
閱讀 1084·2019-08-26 13:55
