【前端見外】6個你應該知道的實用CSS小技巧

時間 2021-04-04

標籤 javascript css html 前端 java 程序員 web 瀏覽器微信框架欄目 CSS 简体版

原文原文鏈接

原文做者：Mehdi Aoussiadjavascript

翻譯：尷尬風流css

原文連接：6 Useful Pure CSS Tips that You Should Knowhtml

我的翻譯，轉載請註明出處，文章中有什麼問題歡迎你們在評論中指出前端

CSS是一種很棒的樣式表語言，咱們能夠使用它來改變網站樣式，或是製做響應式的網站。它是全部Web開發人員必須掌握的技能，由於每一個網站或Web應用程序都會使用CSS。java

現在的CSS語言已經有了許多改進。你能夠在不使用JavaScript的狀況下用純CSS建立一些很酷的東西。這就是爲何你須要瞭解一些CSS技巧，他們能讓你在項目中製做出很是驚豔的UI。程序員

在這篇文章中，咱們將會展現一些實用的CSS技巧，你能夠在接下來的項目中嘗試使用他們。那麼讓咱們直接開始吧。web

1. 給滾動條增長樣式

使用CSS，你能夠輕鬆地在你的網站上修改滾動條的樣式。這樣你能夠實現本身想要的任何效果。瀏覽器

要實現這一點，你須要使用屬性 ::scrollbar 和 ::scrollbar-thumb，下面是一段代碼示例。微信

body{
  height: 200vh;
}
::-webkit-scrollbar{
  width: 17px;
}
::-webkit-scrollbar-thumb{
  background: black;
}

經過代碼你能夠看到，咱們添加了-webkit-前綴，由於這是Chrome和Safari瀏覽器的內核webkit支持的CSS擴展。咱們還添加了咱們的樣式，使滾動條的寬度變大，並變成黑色。框架

你能夠點擊這個連接查看效果

2. 給鼠標選中文本增長樣式

咱們在瀏覽網站或閱讀博客時，常常會用鼠標選擇某段文字。你能夠經過CSS來改變被鼠標選中文本的樣式。

::selection 屬性可讓你輕鬆改變被鼠標選中文本的樣式。

下面是代碼示例：

::selection{
  background: yellow;
  color: black;
}

添加上述樣式表後，用鼠標選擇文字時，文字的背景會變成黃色，文字顏色會變成黑色。

你能夠點擊這個連接查看效果

3. 實現平滑的滾動

你能夠在 html 選擇器中添加CSS屬性 scroll-behavior，這樣整個HTML頁面就會有平滑的滾動。

下面是代碼示例：

html{
 scroll-behavior: smooth;
}

你能夠點擊這個連接查看效果

4. 純CSS實現深色模式

你知道嗎？沒必要使用JavaScript就能夠輕鬆地爲你的網站添加深色模式嗎？我發現一些開發人員使用CSS變量來實現黑暗模式。但還有另外一個很酷的技巧，可讓你在不使用CSS變量的狀況下實現一樣的效果。

咱們將在一個類型爲複選框的輸入元素上使用僞元素::checked，以便在複選框被點擊時輕鬆地在深色模式和淺色模式之間切換。

請看下面這段簡單的HTML和CSS代碼。

HTML代碼：

<body>
    <input type="checkbox" id="checkbox">
    <div class="container">
      <h1>Hello World!</h1>
      <div class="div1">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, pariatur?</p>
      </div>
    </div>
</body>

CSS代碼：

body{
    height: 100vh;
}

.container{
    width: 100%;
    height: 100%;
    padding: 80px 20px;
    transition: .4s ease;
}

/* When the checkbox is clicked */
#checkbox:checked + .container{
  background: black;
  color: white;
}

你能夠點擊這個連接查看效果

If you want to know more details about dark mode using ::checkbox , check out my article below:

若是你想知道更多關於使用 ::checkbox 實現深色模式的細節，請看這篇文章。

5. 改變輸入框中光標的顏色

你也能夠使用CSS來改變輸入框中光標的顏色。使用 caret-color 這個屬性就能夠實現。

下面是代碼示例：

input{
  caret-color: red;
}

你能夠點擊這個連接查看效果

6. 圓錐漸變

CSS的另外一個很酷的地方是你能夠建立漂亮的餅圖。你能夠使用CSS的 conic-gradient 屬性。

下面是一段代碼示例：

div{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}

你能夠點擊這個連接查看效果

結論

你能夠發現，你能夠用純CSS作不少很酷的事情，而沒必要使用任何框架或庫。這就是對於前端開發者來講，爲何CSS很是的重要。

感謝你閱讀個人文章，但願我能幫到你。

我創建了一個技術交流羣，天天會在羣裏發技術名詞相關的英語小卡片，你們能夠加微信「xiedaimala03」備註「程序員英語」進羣，交流技術的同時也順便學點英語，何樂而不爲呢！

也歡迎你們關注公衆號「前端見外」獲取每日英語小卡片。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。