送給你們的每日 CSS 技巧（內含大量高清動圖，手機端慎入！）

時間  2020-02-02
標籤 送給 你們 每日 css 技巧 內含 大量 高清 手機 慎入 欄目 快樂工作 简体版
原文   原文鏈接

從 2020 年第一天開始，程序員 Kevin Powell 天天在 Twitter 的 #CSSTipOfTheDay 話題下，發佈一篇 CSS 技巧 。不只如此，每篇技巧在 codepen 上都要對應可運行 demo，你能夠 在這裏看到 到目前爲止 Kevin Powell 已發佈的全部 CSS 技巧集合。css

下面是我根據他過去一個月已發佈的 31 篇 CSS 技巧作的筆記整理，但願能幫到你們！html

技巧1：漸變色文字

<h2 class="gradient-text">Gradient text</h2>

<style> .gradient-text { background-image: linear-gradient(90deg, red, blue); background-clip: text; color: transparent; } </style>
複製代碼

效果：程序員

image.png

技巧2：下換線動畫效果

<p>Lorem ipsum dolor <a class="fancy-link" href="#">sit amet ... beatae</a>, quo iure ... consequatur.</p>

<style> .fancy-link { text-decoration: none; background-image: linear-gradient(red, red); background-repeat: no-repeat; background-position: bottom left; background-size: 0 3px; transition: background-size 500ms ease-in-out; } .fancy-link:hover { background-size: 100% 3px; } </style>
複製代碼

效果：web

GIF.gif

實現原理：經過控制背景圖片（background-image）的尺寸（background-size）來實現虛擬的下劃線效果的。瀏覽器

技巧3：順滑滾動

html {
  scroll-behavior: smooth;
}
複製代碼

效果：ide

GIF.gif

技巧4：text-shadow 多陰影設置

<h2 class="so-many-shadows">This is fun</h2>

<style> .so-many-shadows { text-shadow: 3px 3px 0 yellow, 6px 6px 0 blue, 9px 9px red, 12px 12px 0 black; } </style>
複製代碼

效果：函數

GIF.gif

技巧5：背景混合

使用 background-blend-mode 屬性，能將元素背景色與背景圖片按照不一樣的模式（mode）混合在一塊兒，製造出不一樣的混合效果。佈局

<div class="content">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<style> .one, .two, .three { background-color: orange; background-image: url(https://picsum.photos/id/1005/600/600); } .one { background-blend-mode: screen; } .two { background-blend-mode: multiply; } .three { background-blend-mode: overlay; } </style>
複製代碼

效果：post

image.png

技巧6：基於媒體查詢，改變 Grid 佈局

若是咱們的 Grid 項目是基於 grid-area 設置佈局的，那麼能夠藉助媒體查詢，經過調整 Grid 容器元素的 grid-template-areas 屬性，將能很是容易的變換佈局結構。學習

<div class="card">
  <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img">
  <ul class="social-list">
    <li><a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a></li>
    <li><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
    <li><a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a></li>
  </ul>
  <h2 class="profile-name">Ramsey Harper</h2>
  <p class="profile-position">Graphic Designer</p>
  <p class="profile-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum?</p>
</div>

<style> .card { display: grid; grid-template-columns: 1fr; grid-column-gap: 2em; /* 默認採用垂直佈局 */ grid-template-areas: "name" "image" "social" "position" "description"; } /* 利用媒體查詢，當視口寬度大於 600px 的時候， 採用更易於閱讀的雙列布局方式 */ @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } </style>
複製代碼

效果：

GIF.gif

技巧7：使用 Grid 佈局實現內容重疊

Grid 簡化了不少佈局方式，包括內容重疊。使用 Grid 實現內容重疊一般比使用 position: absolute 要簡單得多，也比嘗試使用負邊距要好得多。

<div class="grid">
  <img src="https://unsplash.it/200/300" alt="" class="image">
  <p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae, ut soluta autem dolorum. Nesciunt dolore ipsum corporis modi magni labore voluptatibus, harum maiores!</p>
</div>

<style> .grid { display: grid; grid-template-columns: repeat(5, 1fr); } /* .image, .body 都佔據一行 */ .image, .body { grid-row: 1 / 2; align-self: center; } /* .image 佔據第1、第二列 */ .image { grid-column: 1 / 3; } /* .body 佔據第二列到最後一列 */ .body { grid-column: 2 / -1; } <style> 複製代碼

效果（這裏使用了 Firefox 的網格佈局觀察器查看，顯示了行號）：

image.png

閱讀文章，瞭解更多：www.freecodecamp.org/news/css-gr…

技巧8：使用 outline 實現偏移「邊框」效果

咱們可使用 outline 簡單的模擬出元素邊框效果，與 outline-offset 屬性結合使用，還能製做出偏移「邊框」效果出來。

.outline {
  outline: 2px solid white;
  outline-offset: -10px;
}
複製代碼

效果：

GIF.gif

技巧9：border-radius 的斜線語法

border-radius 除了普通的四個值語法外，還能使用用斜線分割的、最多 8 個值的語法，後者能夠更加細粒度的控制每一個角的兩個角半徑值：斜線以前的值設置的是水平半徑，斜線以後的值設置的是垂直半徑。

.border-radius {
  border-radius: 50px 25px / 25px 50px;
}
複製代碼

效果：

image.png

能夠看見，斜線前的值控制的是角的第一個角半徑值，斜線後的值控制的是角的第二個角半徑值。控制順序是從左上角（border-top-left-raduis）開始順時針旋轉的。

技巧10：背景圖片從文字透出

<h2 class="image-text">This is pretty easy!</h2>

<style> .image-text { background-image: url(https://picsum.photos/id/865/300/100); background-size: cover; background-clip: text; color: transparent; } </style>
複製代碼

效果：

GIF.gif

技巧11：響應式多列布局

經過下面一句聲明，就能實現文章內容的多列響應式佈局！

.content {
  columns: 200px;
}
複製代碼

效果：

GIF.gif

技巧12：使用 box-shadow 營造多邊框疊加效果

box-shadow 屬性有一個設置擴散半徑的語法：

咱們就是使用這個擴散半徑語法實現多邊框疊加效果的：

<div class="content">
  <p>Lorem ipsum dolor ... Velit, pariatur placeat!</p>
</div>

<style> .content { box-shadow: 0 0 0 10px #EE6352, 0 0 0 20px #D45379, 0 0 0 30px #A4558F, 0 0 0 40px #6D588E, 0 0 0 50px #405378; } </style>
複製代碼

查看效果：

GIF.gif

技巧13：Flexbox 的 margin auto 佈局

在 Flex 容器中，咱們可使用 margin auto 技術，控制 Flex 項目的對齊方式。margin auto 的含義是對所在方向上的剩餘空間進行分配。

如下面的代碼爲例：

<div class="content">
  <div class="box left">left</div>
  <div class="box right">right</div>
</div>

<style> .content { display: flex; } .left { margin: 0 auto; } .right { margin-left: auto; } </style>
複製代碼

效果：

GIF.gif

.left 左右 margin auto 了，.right 只有左邊的 margin auto 了。至關於：把當前剩餘水平空間平均分紅了 3 份，分別分到了 .left 的兩邊和 .right 的左邊。由上圖可知，每份的大小是 132.609px。

技巧14：background-repeat space 用過沒？

.content {
  background-repeat: space no-repeat;
  /* 等同於 background-repeat-x: space; background-repeat-y: no-repeat; */
}
複製代碼

查看演示：

GIF.gif

從上面的演示，能夠看出來 repeat 與 space 關鍵字的不一樣之處在於：使用 background-repeat-x: space 時，老是能保證當前視界範圍內的星星數量是整數個，至關因而使用 background-repeat-x: ``repeat 設定背景時，把那個徹底沒有露出來的星星去掉，將富裕出來的空間平均地分配到餘下星星之間獲得的效果。

技巧15： 在 Flex 容器中如何垂直居中

在 Flex 容器中，咱們在使用 margin-top: auto; margin-bottom: auto; 垂直居中 Flex 項目。

<div class="content parent">
	<p class="child">Hello!</p>
</div>

<style> .content { display: flex; /* 或是 grid */ } .child { margin-top: auto; margin-bottom: auto } </style>
複製代碼

查看演示：

GIF.gif

技巧16：貼底 footer

上一條技巧裏學習了，使用 margin auto 實現垂直居中效果。若是隻是使用 margin-top: auto，會發現元素被推到了底部——這就是實現貼底 footer 的技巧所在。

.card__footer {
  margin-top: auto;
}
複製代碼

效果：

  1. 使用前

EOZ8UeiWsAAoMUN.jpg

  1. 使用後

EOZ8Uu3W4AMfO1_.jpg

技巧17：爲被選擇的文本設置樣式

使用 ::selection 僞元素選擇器，爲被選擇的文本設置樣式。

::selection {
  background-color: rgba(238, 99, 82,1);
  color: white;
}
複製代碼

效果：

  1. 原來

EOf46yvXsAAIwtq.jpg

  1. 如今

EOf460IX0AM3MPv.jpg

技巧18：基於 rem 值設置元素的 padding 值

爲元素設置 padding 時，可使用 em、rem 這樣的相對單位。這樣在元素文字大小修改後，padding 計算值就跟着改變了。

.btn { padding: .75rem 1.5rem; }
.btn-small  { font-size: .9rem; }
.btn-normal { font-size: 1.25rem; }
.btn-large  { font-size: 1.5rem; }
複製代碼

效果：

GIF.gif

技巧19：做爲設計元素使用的僞元素

僞元素能夠做爲額外的設計元素添加進頁面中。連接裏給出的是一個比較極端的示例，目的是爲了讓你瞭解一行 HTML 能夠作多少事情。

EOqLLy0WkAUxRJL.jpg

技巧20：控制第一個段落的樣式

咱們用 p:first-of-type 設置網頁裏的一篇文章。

<main class="main">
  <h2>The first child pseudo-selector</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae porro dolor commodi consequatur consectetur dolores omnis perferendis! Earum ab facilis rerum blanditiis labore? Praesentium, ea similique dolorum et harum voluptate.</p>
  <p>Excepturi,... soluta suscipit eveniet enim facilis eius quis?</p>
  <p>Itaque at, aut ... Delectus minus quis dignissimos commodi. Culpa, nesciunt!</p>
  <p>Aliquam itaque perferendis ... deserunt odio laudantium vel obcaecati!</p>
</main>

<style> .main { font-size: 1rem; } .main p:first-of-type { font-size: 1.25rem; } </style>
複製代碼

設置後，發現文章第一個天然段的文字大小變成 1.25rem 了。

image.png

技巧21：多背景元素

background-image 支持同時設置多個背景，每一個背景地址之間使用逗號分隔便可。

.content {
  background-image: 
    url(assets/img/flags.png), 
    url(assets/img/suns.jpg);
  background-repeat: repeat-x, repeat;
  background-size: 175px, auto;
}
複製代碼

效果：

image.png

技巧22：Grid 項目相對誰定位的？

若是將 Grid 項目設置爲 position: absolute，Grid 容器設置了 position: relative。結果發現，Grid 項目並不是是相對容器定位的，而是相對於 Grid 項目所佔據的網格區域（grid area） 定位的。

.grid {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, 25vh);
  grid-template-columns: repeat(4, 1fr);
}
.grid-item {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  position: absolute;
  left: 25px;
  right: 25px;
  top: 25px;
  bottom: 25px;
}
複製代碼

image.png

技巧23：推薦 body 行高 1.6

建議新項目的 body 行高值設置爲 1.6，這是通用建議。固然，基於 font、行寬和 font-size 值的不一樣，我 
我傾向於設置 1.4 和 1.6 之間的 line-height 值。

body {
  line-height: 1.6;
}
複製代碼

EO-ydbCWoAA0Nr-.jpg

技巧24：文字描邊效果

<p class="outline">Why didn't I know about this sooner?</p>

<style> .outline { color: white; -webkit-text-stroke: 2px black; } </style>
複製代碼

效果：

image.png

技巧25：在 Grid 佈局中實現垂直居中效果

Flexbox 中的垂直居中效果實現，你們應該都用過吧。

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
複製代碼

Grid 垂直居中方式甚至更簡單：

.grid {
  display: grid;
  place-items: center;
}
複製代碼

效果：

image.png

技巧26：drop-shadow 這個 filter 功能函數用過沒？

這邊有一張背景透明的 png 圖片。想要給圖片裏的文字加陰影怎麼辦呢？

image.png

使用 box-shadow 嗎？看看效果：

image.png

不行。其實改用 drop-shadow 就好了。

image.png

是吧。這裏須要注意的是，drop-shadow 是做爲 filter 的功能函數出現的，語法與 box-shadow 很像。前面使用的是 box-shadow: 10px 10px 10px black 的寫法，後者的寫法則是 filter: drop-shadow(10px 10px 10px black)，像吧。

技巧27：:not 僞類的妙用

:not 有不少使用方式。好比用它和 :first-child/:last-child 結合使用，就能實現設置除第一個/最後一個以外的元素樣式。

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="" class="nav-link">About</a></li>
    <li class="nav-item"><a href="" class="nav-link">Support</a></li>
    <li class="nav-item"><a href="" class="nav-link">Blog</a></li>
    <li class="nav-item"><a href="" class="nav-link">Contact</a></li>
  </ul>
</nav>

<style> .nav-item:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.25); } <style> 複製代碼

效果：

image.png

技巧28：Flexbox 的 gap 屬性回退方案

Grid 佈局裏控制 Grid 項目間隙的屬性 grid-gap，已經修改成更通用的 gap 屬性了。Flexbox 佈局中也能使用這個屬性控制 Flex 項目的間隙，但如今只有 Firefox 瀏覽器實現了這個功能。這裏給出了一個回退方案，讓你在 Flexbox 中也能控制項目間的間隙。

<div class="content">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<style> .content { display: flex; } .content > * + * { margin-left: 1em;} </style>
複製代碼

效果：

GIF.gif

技巧29：爲全部的元素加個 outline 找問題

佈局網頁時，有時會看到網頁被莫名其妙戳出一個橫向滾動條出來，不知道是哪一個（些）元素搞的鬼。這時候，能夠給網頁裏全部元素都添加一個 outline，找出問題所在：

* { outline: 2px solid limegreen; }
複製代碼

效果：

EPc49zPWAAAOch0.jpg

技巧30：自定義輸入框的佔位文本樣式

咱們可使用 ::placeholder 僞元素自定義輸入框的佔位文本樣式。

input { 
  font-weight: 800;
  color: #d27054;
}

::placeholder {
  opacity: 1;
  font-weight: 300;
  color: #666;
  font-size: 1rem;
}
複製代碼

效果：

EPi1lmgWAAIhDd5.jpg

技巧31：實現浮動標籤效果（float label）

:placeholder-shown 僞類顧名思義，匹配當前沒有輸入內容、顯示佔位文本的輸入框。將 :placeholder-shown 與 :not 結合使用，就能實現浮動標籤效果。

<div class="input-field">
  <input type="text" placeholder="Enter your first name" id="fname" />
  <label for="fname">First name</label>
</div>

<div class="input-field">
  <input type="text" placeholder="Enter your last name" id="lname" />
  <label for="lname">Last name</label>
</div>

<style> label { /* 默認標籤文本是透明的 */ opacity: 0; /* 有所偏移的 */ transform: translateY(5px); /* 設置了過渡動畫效果的（針對 opacity 和 transform 屬性） */ transition: opacity linear 200ms, transform ease-in 150ms; } /* 在輸入框中輸入內容後，佔位文本不可見，詞條聲明生效 */ input:not(:placeholder-shown) ~ label { /* 標籤文本設置爲可見 */ opacity: 1; /* 與 transition 結合起來，標籤文本在可見的過程當中，出現浮動效果 */ transform: translateY(0px); } <style> 複製代碼

效果：

GIF.gif

相關連接

（正文完）

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程