【譯】這44個 CSS 精選知識點你能在30 秒內給出答案嗎？

zz_jesse發表於2019-09-24

寫在前面

一個週五的晚上，閒來無事整理下自己的 github（經常做收藏黨），今天打算都過一遍，發現一個star很高的專案，裡面有大量的 CSS 片段，而且標題很誘人，然後又花了將近1個小時從頭到尾過了一遍，其中一些是我們常用的一些知識點，另外也包含一些比較新的屬性的應用，知識點挺多的，為了讓大家看起來更方便些，然後又花了點（很長很長）時間翻譯成中文。

github.com/30-seconds/…

當然提前需要和作者溝通下得到作者的允許，作者希望建立一個倉庫並且和官方保持同步更新，讓更多的人看到。

中文倉庫 github.com/Bigerfe/30-… ，目前完成了 CSS 精選集合的翻譯。

本文屬於意譯而非直譯，為了方便理解也增加了一些自己的語言，如果存在偏差或錯誤還請留言指正。

精選的有用CSS片段集合，您可以在30秒或更短的時間內理解這些片段。

本 CSS 精選集合共分為5類 - 佈局、視覺、動畫、互動、其他。

更加詳細的內容還請看原文件。github.com/30-seconds/…。

佈局

1. 盒模型重置

盒模型重置，使盒子的寬度和高度不受其邊框(border)或填充(padding)的影響。
複製程式碼

HTML

<div class="box">border-box</div>
<div class="box content-box">content-box</div>
複製程式碼

CSS

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

box-sizing：當元素設定為border-box時，即便設定了padding或border也不會改變元素的寬度和高度。
box-sizing：設定inherit使元素繼承父級的box-sizing規則。

瀏覽器支援情況

99.9% 檢視本條 caniuse

2. 清除浮動更好的方式

無需藉助輔助元素進行浮動的清除。

注意：這僅在使用float佈局時才有用。實際場景中請考慮使用Flexbox佈局或者網格佈局。

HTML

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>
複製程式碼

CSS

.clearfix{
  border:solid 1px red;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left:20px;
}

複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援情況

100%

3. 不變寬高比

給定寬度可變的元素，它將確保其高度以響應方式保持成比例（即，其寬高比保持不變）。

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

HTML

<div class="constant-width-to-height-ratio"></div>
複製程式碼

CSS

.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}
複製程式碼

說明

width:50% 只設定父級元素的寬度
::before 為父級元素定義一個偽元素
padding-top: 100%; 設定偽元素的內上邊距，這裡的百分比的值是按照寬度計算的，所以會呈現為一個響應式的元素塊。
此方法還允許將內容正常放置在元素內。

瀏覽器支援情況

100%

4.使用表格居中

使用display：table（作為flexbox的替代）使子元素在其父元素中水平垂直居。

HTML

<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>
複製程式碼

CSS

.container {
  border: 1px solid #333;
  height: 250px;
  width: 250px;
}
.center {
  display: table;
  height: 100%;
  width: 100%;
}
.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

display：table 使.center元素的行為類似於<table> HTML元素;
設定.center的寬高為100%，使其填滿父元素;
display：table-cell, 設定'.center > span'的table-cell允許元素表現得像HTML元素;
text-align: center 使子元素水平居中;
vertical-align: middle 使子元素垂直居中;

外部父級必須有固定的寬高。

瀏覽器支援情況

100%

檢視本條 caniuse

5. 使子元素均勻分佈

HTML

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>
複製程式碼

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

display: flex :啟動flex 佈局
justify-content: space-between：
均勻地水平分配子元素。第一個子元素位於左邊緣，而最後一個子元素位於右邊緣。或者，使用justify-content：space-around來分配子節點周圍的空間，而不是它們之間。

瀏覽器支援情況

99.5%

需要字首才能獲得全面支援。 caniuse

6. 讓圖片在容器中顯示的更舒適

設定影像在其容器內的適合度和位置，同時保留其寬高比。以前只能使用背景影像和background-size屬性來實現。

HTML

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
複製程式碼

CSS

.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}
.image-contain {
  object-fit: contain;
  object-position: center;
}
.image-cover {
  object-fit: cover;
  object-position: right top;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

object-fit: contain 容器內顯示整個影像，並且保持寬高比
object-fit: cover 用影像填充容器，並保持寬高比
object-position: [x] [y] 對影像的顯示部位進行調整

瀏覽器支援程度

95.5% caniuse

7. 使用 flexbox 居中

使用 flexbox 水平垂直居中其子元素

HTML

<div class="flexbox-centering"><div class="child">Centered content.</div></div>
複製程式碼

CSS

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

display: flex 啟用 flex 區域性
justify-content: center 子元素水平居中
align-items: center 子元素垂直居中

瀏覽器支援程度

99.5% （需要使用字首） caniuse

8.將元素垂直居中於另一個元素。

HTML

<div class="ghost-trick">
  <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
複製程式碼

CSS

.ghosting {
  height: 300px;
  background: #0ff;
}
.ghosting:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
p {
  display: inline-block;
  vertical-align: middle;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明使用：before偽元素的樣式垂直對齊內聯元素而不更改其position屬性。

瀏覽器支援程度

99.9% caniuse

9. 使用網格居中

使用網格水平垂直居中子元素.

HTML

<div class="grid-centering"><div class="child">Centered content.</div></div>
複製程式碼

CSS

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

display: grid 啟用網格佈局
justify-content: center 使子元素水平居中
align-items: center 使子元素垂直居中

瀏覽器支援程度

92.3% caniuse

10. 使最後一項佔滿剩餘高度

通過為最後一個元素提供當前視口中剩餘的可用空間，即使在調整視窗大小時，也可以利用可用的視口空間。

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>
複製程式碼

CSS

html,
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div:last-child {
  background-color: tomato;
  flex: 1;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

height: 100% 將容器的高度設為視口的高度
display: flex 啟用 flex
flex-direction: column 將專案的順序設定成從上到下
flex-grow: 1 flexbox會將容器的剩餘可用空間應用於最後一個子元素。父級必須具有視口高度。 flex-grow：1可以應用於第一個或第二個元素，它將具有所有可用空間。

瀏覽器支援程度

99.5% 需要使用字首 caniuse

11. 屏外隱藏元素

HTML

<a class="button" href="http://pantswebsite.com">
  Learn More <span class="offscreen"> about pants</span>
</a>
複製程式碼

CSS

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

刪除所有邊框
使用 clip 隱藏元素
設定寬高為1px
使用margin：-1px取消元素的高度和寬度
隱藏元素的溢位
移除所有的padding
絕對定位元素，使其不佔用DOM中的空間

瀏覽器支援程度

100% 需要使用字首 caniuse (雖然cilp已被廢棄，但較新的clip-path 目前對瀏覽器的支援非常有限。)

12. 使用transform居中子元素

使用 position: absolute and transform: translate() 進行居中，不需要知道父級和子元素的寬高，因此它非常適合響應式應用程式。

HTML

<div class="parent"><div class="child">Centered content</div></div>
複製程式碼

CSS

.parent {
  border: 1px solid #333;
  height: 250px;
  position: relative;
  width: 250px;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援程度

97.7% 需要使用字首 caniuse

視覺

13.多行文字截斷顯示

如果文字長於一行，則將截斷n行，並以漸變結束。

HTML

<p class="truncate-text-multiline">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
  labore et.
</p>
複製程式碼

CSS

.truncate-text-multiline {
  overflow: hidden;
  display: block;
  height: 109.2px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  width: 400px;
  position: relative;
}
.truncate-text-multiline:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

overflow: hidden 防止內容溢位
width: 400px 確保元素有尺寸
height: 109.2px 計算的高度值，它等於font-size * line-height * numberOfLines（在這種情況下為26 * 1.4 * 3 = 109.2）
height: 36.4px 漸變容器的計算值，它等於font-size * line-height（在這種情況下為26 * 1.4 = 36.4）
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50% 漸變從 透明到漸變從透明到＃f5f6f9

瀏覽器支援程度

97.5% caniuse

14. 畫一個圓

使用純CSS建立圓形。

HTML

<div class="circle"></div>
複製程式碼

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援程度

97.7% caniuse

15. 列表計數器

計數器本質上是由CSS維護的變數，其值可以通過CSS規則遞增以跟蹤它們被使用的次數。

HTML

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>
複製程式碼

CSS

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明你現在可以使用任何型別的html 標籤建立有序列表。

counter-reset 初始化計數器，該值是計數器的名稱。預設情況下，計數器從0開始。此屬性還可用於將其值更改為任何特定數字。
counter-increment 用於可數的元素。一旦計數器重置初始化，計數器的值可以增加或減少。
counter(name, style)顯示節計數器的值。通常用於內容屬性。此函式可以接收兩個引數，第一個作為計數器的名稱，第二個參數列示佔位內容，例如3.1的小數點。
CSS計數器對於製作輪廓列表特別有用，因為計數器的新例項是在子元素中自動建立的。使用counters（）函式，可以在不同級別的巢狀計數器之間插入分隔文字。

瀏覽器支援程度

99.9% caniuse

16.自定義滾動條

HTML

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>
複製程式碼

CSS

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援程度

90.7% caniuse

17. 自定義文字選擇的樣式

HTML

<p class="custom-text-selection">Select some of this text.</p>
複製程式碼

CSS

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援程度

86.5% caniuse

18. 建立動態陰影

建立類似於box-shadow的陰影，但基於元素本身的顏色。

HTMl

<div class="dynamic-shadow"></div>
複製程式碼

CSS

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}
.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

::after 定義一個偽元素
position: absolute 使偽元素脫離文件流並相對於父級定位
width: 100% and height: 100% 對偽元素進行大小調整以填充其父元素的大小，使其大小相等。
background: inherit 使偽元素繼承父級的線性漸變
top: 0.5rem 將偽元素相對於其父元素略微偏移。
filter: blur(0.4rem) 設定偽元素模糊效果，以建立下方陰影效果。
opacity: 0.7 設定偽元素透明度
z-index: -1 將偽元素定位在父元素後面但在背景前面。

瀏覽器支援程度

94.2% 需要使用字首 caniuse

19. 蝕刻文字效果

建立一種效果，其中文字看起來像“蝕刻”或雕刻在背景中。 HTML

<p class="etched-text">I appear etched into the background.</p>
複製程式碼

CSS

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

text-shadow: 0 2px white 從原點位置建立一個水平偏移0px和垂直偏移2px的白色陰影。
背景必須比陰影更暗，效果才更明顯。

瀏覽器支援程度

99.5% 需要使用字首 caniuse

20. Focus Within 偽類

如果表單中的任何子項被聚焦，則更改表單的外觀。 HTML

<div class="focus-within">
  <form>
    <label for="given_name">Given Name:</label> <input id="given_name" type="text" /> <br />
    <label for="family_name">Family Name:</label> <input id="family_name" type="text" />
  </form>
</div>
複製程式碼

CSS

form {
  border: 3px solid #2d98da;
  color: #000000;
  padding: 4px;
}
form:focus-within {
  background: #f7b731;
  color: #000000;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

偽類：：focus-within 將對應的樣式應用於父元素（任何子元素被聚焦）。例如，表單元素內的輸入元素。

瀏覽器支援程度

82.9% IE11或當前版本的Edge不支援。 caniuse

21. 指定元素的全屏

:fullsrcreen 全屏偽類表示瀏覽器處於全屏模式時顯示的元素。 HTML

<div class="container">
  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
  <div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
  <br />
  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
    Go Full Screen!
  </button>
</div>
複製程式碼

CSS

.container {
  margin: 40px auto;
  max-width: 700px;
}
.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
}
.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}
.element:-ms-fullscreen p {
  visibility: visible;
}
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

:fullscreen 偽類選擇器用於選擇和設定以全屏模式顯示的元素。

瀏覽器支援程度

85.6%

屬性詳解

caniuse

22.漸變文字

為文字提供漸變顏色。

HTML

<p class="gradient-text">Gradient text</p>
複製程式碼

CSS

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援程度

94.1%

caniuse

23. 漸變跟蹤

一種懸停效果，其中漸變跟隨滑鼠游標。

HTML

<button class="button">
	<span>Hover me I'm awesome</span>
</button>
複製程式碼

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: white;
}

.button {
	position: relative;
	appearance: none;
	background: #f72359;
	padding: 1em 2em;
	border: none;
	color: white;
	font-size: 1.2em;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	border-radius: 100px;
	
	span {
		position: relative;
		pointer-events: none;
	}
	
	&::before {
		--size: 0;

		content: '';
		position: absolute;
		left: var(--x);
		top: var(--y);
		width: var(--size);
		height: var(--size);
		background: radial-gradient(circle closest-side, #4405f7, transparent);
		transform: translate(-50%, -50%);
		transition: width .2s ease, height .2s ease;
	}
	
	&:hover::before {
		--size: 400px;
	}
}
複製程式碼

document.querySelector('.button').onmousemove = (e) => {

	const x = e.pageX - e.target.offsetLeft
	const y = e.pageY - e.target.offsetTop

	e.target.style.setProperty('--x', `${ x }px`)
	e.target.style.setProperty('--y', `${ y }px`)
	
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

瀏覽器支援程度

91.6% 需要使用 js caniuse

24. :not 偽類選擇器

:not 偽選擇器對於設定一組元素的樣式非常有用，同時保留最後一個（指定的）元素的樣式。

HTML

<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
複製程式碼

CSS

.css-not-selector-shortcut {
  display: flex;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0 0.75rem;
}
li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}
複製程式碼

DEMO

可在 CodePen 上檢視真實效果和編輯程式碼

說明

li:not(:last-child) 設定除last：child之外的所有li元素的樣式，所以最後一個元素右側沒有 border.

瀏覽器支援程度

99.9% caniuse

25.溢位滾動漸變

給溢位元素新增漸變，以更好地指示要滾動的內容。 HTLM

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit? <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>
複製程式碼

CSS

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.001),
    white
  ); /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}
複製程式碼

DEMO

說明

::after 定義一個偽元素用來展示漸變效果
background-image: linear-gradient(...) 新增一個從透明變為白色（從上到下）的線性漸變。
pointer-events: none 指定偽元素不能是滑鼠事件的目標，後面的文字仍然是可選擇/互動的。

瀏覽器支援程度

97.5% caniuse

26.給文字新增漂亮的下劃線

HTML

<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
複製程式碼

CSS

.pretty-text-underline {
  display: inline;
  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.pretty-text-underline::-moz-selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
複製程式碼

DEMO

CodePen上檢視和編輯程式碼

瀏覽器支援程度

97.5% caniuse1 caniuse2

27. 重置所有樣式

使用一個屬性將所有樣式重置為預設值。這不會影響direction和unicode-bidi屬性。

HTML

<div class="reset-all-styles">
  <h5>Title</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
    repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
    iure, consequatur velit sit?
  </p>
</div>
複製程式碼

CSS

.reset-all-styles {
  all: initial;
}
複製程式碼

DEMO

CodePen上檢視和編輯程式碼

說明

all 屬性允許您將所有樣式（繼承或不繼承）重置為預設值。

瀏覽器支援程度

91.2% caniuse

28. 形狀分隔符

使用SVG形狀分割兩個不同的塊以建立更有趣的視覺外觀。

HTML

<div class="shape-separator"></div>
複製程式碼

CSS

.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}
.shape-separator::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}
複製程式碼

DEMO

CodePen上檢視和編輯程式碼

說明

background-image: url(...)新增SVG形狀（24x12三角形）作為偽元素的背景影像，預設情況下重複。它必須與要分割的塊顏色相同。對於其他形狀，我們可以使用SVG的URL編碼器。

瀏覽器支援程度

99.7% caniuse

29. 系統字型

HTML

<p class="system-font-stack">This text uses the system font.</p>
複製程式碼

CSS

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
複製程式碼

DEMO

CodePen上檢視和編輯程式碼

說明瀏覽器會對字型進行逐個查詢，如果找到的話就是用當前的，如果找不到字型（在系統上或在CSS中定義），則繼續往後查詢。

-apple-system在iOS和macOS上使用（但不是Chrome)
BlinkMacSystemFont 用於macOS Chrome
Segoe UI 用於Windows 10
Roboto 在Android上使用
Oxygen-Sans 在Linux KDE上使用
Ubuntu 用於Ubuntu
Cantarell 在GNOME Shell的Linux上使用
Helvetica Neue and Helvetica 用於macOS 10.10及更低版本
Arial 作業系統廣泛支援的字型
sans-serif 如果不支援其他任何字型，則降級使用 sans-serif 通用字型

瀏覽器支援程度 100%

30. css 開關

只使用 css 來實現

HTMl

<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
複製程式碼

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
  background-color: #7983ff;
}
.offscreen {
  position: absolute;
  left: -9999px;
}
複製程式碼

DEMO

CodePen上預覽和編輯程式碼

瀏覽器支援程度 97.7% 需要使用字首

caniuse

31. 用 css 畫一個三角形

HTML

<div class="triangle"></div>
複製程式碼

CSS

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
複製程式碼

DEMO

CodePen上預覽和編輯程式碼

瀏覽器支援程度 100%；

32. 斑馬條紋列表

建立具有交替背景顏色的列表，這對於區分各行間的內容很有用。

HTML

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>
複製程式碼

CSS

li:nth-child(odd) {
  background-color: #eee;
}
複製程式碼

DEMO

CodePen上預覽和編輯程式碼

瀏覽器支援程度 99.9% caniuse

動畫

33.彈跳 loading 動畫

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
複製程式碼

CSS

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
複製程式碼

DEMO

CodePen上預覽和編輯程式碼

瀏覽器支援程度97.4% caniuse

34. 按鈕邊框動畫

建立一個滑鼠懸停的邊框動畫

HTML

<div class="button-border"><button class="button">Submit</button></div>
複製程式碼

CSS

.button {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}
.button:before,
.button:after {
  border: 0 solid transparent;
  transition: all 0.25s;
  content: '';
  height: 24px;
  position: absolute;
  width: 24px;
}
.button:before {
  border-top: 2px solid #c47135;
  left: 0px;
  top: -5px;
}
.button:after {
  border-bottom: 2px solid #c47135;
  bottom: -5px;
  right: 0px;
}
.button:hover {
  background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
  height: 100%;
  width: 100%;
}
複製程式碼

DEMO

CodePen上預覽和編輯程式碼

說明使用：before和：after偽元素作為在懸停時設定動畫的邊框。

瀏覽器支援程度 100%.

35.甜甜圈旋轉器

建立一個甜甜圈旋轉器，可用於等待內容的載入。

DEMO

HTML

<div class="donut"></div>
複製程式碼

CSS

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}
複製程式碼

CodePen上預覽和編輯程式碼

說明對於整個元素使用半透明邊框，然後設定一側的邊框顏色 border-left-color: #7983ff;,最後使用動畫旋轉整個元素。

瀏覽器支援程度** 97.4%** 需要使用字首。

caniuse1 https://caniuse.com/#feat=transforms2d

caniuse2 feat=transforms2d

36.緩動效果

DEMO

HTML

<div class="easing-variables">Hover</div>
複製程式碼

CSS

:root {
  /* Place variables in here to use globally */
}
.easing-variables {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  display: inline-block;
  width: 75px;
  height: 75px;
  padding: 10px;
  color: white;
  line-height: 50px;
  text-align: center;
  background: #333;
  transition: transform 1s var(--ease-out-quart);
}
.easing-variables:hover {
  transform: rotate(45deg);
}
複製程式碼

CodePen上預覽和編輯程式碼

瀏覽器支援程度** 91.6% ** caniuse css-variables

37.高度過度

當元素的高度未知時，將元素的高度從0轉換為自動。

DEMO

CodePen上預覽和編輯程式碼

HTML

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</div>
</div>
複製程式碼

CSS

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: var(--max-height);
}
複製程式碼

JAVASCRIPT

var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
複製程式碼

說明

瀏覽器支援程度 91.6% caniuse css-variables

注意：將會導致所有動畫幀重排，過度中如果元素下方有大量元素，則可能會出現滯後現象。

caninuse - css-variables

caninuse - css-transitions

38.懸停陰影動畫

在文字上懸停時，在文字週圍建立一個陰影框動畫效果。

動畫效果可在CodePen上預覽和編輯程式碼

HTML

<p class="hover-shadow-box-animation">Box it!</p>
複製程式碼

CSS

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}
複製程式碼

瀏覽器支援程度97.3%

caniuse - feat-transforms3d

caniuse - css-transitions

39.懸停下滑線動畫

當文字懸停時，建立文字下劃線動畫效果。

DEMO

動畫效果可在CodePen上預覽和編輯程式碼

HTML

<p class="hover-underline-animation">Hover this text to see the effect!</p>
複製程式碼

CSS

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
複製程式碼

說明

display: inline-block 使p成為內聯塊，以防止下劃線跨越整行寬度而不僅僅是文字內容。
position: relative 設定父元素為相對定位
::after 定義一個偽元素
position: absolute 將偽元素脫離文件六，並將其相對於父元素定位
width: 100% 確保偽元素和父元素的寬度一致。
transform: scaleX(0) 最初將偽元素縮放為0，因此他是看不見的。
bottom: 0 and left: 0 將偽元素放在父元素的左下角。
transition: transform 0.25s ease-out 設定動畫效果為ease-out,並且在0.25秒內完成。
transform-origin: bottom right 變換中心點到父元素的右下角。
:hover::after 然後使用scaleX（1）將寬度轉換為100％，然後將中心點更改為左下角，允許它在懸停時從另一個方向轉換出來。

瀏覽器支援程度97.5%

caniuse - feat=transforms2d

caniuse - css-transitions

互動

40. 禁用選擇

使用 css 讓內容無法選取。

DEMO

可在CodePen上預覽效果和編輯程式碼

HTML

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
複製程式碼

CSS

.unselectable {
  user-select: none;
}
複製程式碼

說明

user-select: none 指定無法選擇文字

瀏覽器支援程度93.2% （需要使用字首，這並不是防止使用者複製內容的安全方法。）

caniuse - feat=user-select-none

41. 彈出選單

在懸停和焦點上彈出互動式選單。

可在CodePen上預覽效果和編輯程式碼

HTML

<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
複製程式碼

CSS

.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}
複製程式碼

說明

left: 100% 彈出選單從左側偏移其父級寬度的100％。
visibility: hidden
.reference:hover > .popout-menu 滑鼠懸停時，.popout-menu 顯示
.reference:focus > .popout-menu 聚焦時，.popout-menu 顯示
.reference:focus-within > .popout-menu 確保在焦點位於參考範圍內時顯示彈出視窗。

瀏覽器支援程度 100%;

42.兄弟元素淡化

懸停時兄弟節點淡化顯示.

DEMO

可在CodePen上預覽效果和編輯程式碼

HTML

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
  <span>Item 5</span> <span>Item 6</span>
</div>
複製程式碼

CSS

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}
複製程式碼

說明

transition: opacity 0.2s 設定0.2秒的淡化動畫。
.sibling-fade:hover span:not(:hover)當父級懸停時，選擇當前未懸停的span子項並將其透明度更改為0.5。

瀏覽器支援程度 97.5%；

caniuse-feat=css-sel3

caniuse-feat=css-transitions

其他

43. 計算函式 Calc()

函式calc（）允許使用數學表示式定義CSS值，屬性採用的值是數學表示式的結果。

DEMO

可在CodePen上預覽效果和編輯程式碼

如果你想在右側和底部對齊背景影像，則只能使用直線長度值。所以現在可以使用calc（）函式.

HTML

<div class="box-example"></div>
複製程式碼

CSS

.box-example {
  height: 280px;
  background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
  background-position: calc(100% - 20px) calc(100% - 20px);
}
複製程式碼

說明

允許加法，減法，乘法和除法。
可以為表示式中的每個值使用不同的單位（例如，畫素和百分比）。
允許巢狀calc（）函式。
它可用於任何允許，，，，，或的屬性，如width，height，font-size，top等。

瀏覽器支援程度 97.0%

caniuse - feat=calc

44. css 自定義變數

包含要重用的特定值的CSS變數。

HTML

<p class="custom-variables">CSS is awesome!</p>
複製程式碼

CSS

:root {
  /* Place variables within here to use the variables globally. */
}
.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}
複製程式碼

DEMO

可在CodePen上預覽效果和編輯程式碼

說明

--variable-name: 用這樣的格式來宣告變數。
var(--variable-name) 使用此函式在整個文件中重用變數。

瀏覽器支援程度 91.6%

caniuse - feat=css-variables

更多精彩好玩有用的前端內容，請關注公眾號《前端技術江湖》

這30個CSS選擇器，你必須熟記（上）
2019-10-30
CSS
30道CSS 面試知識點總結
2022-04-08
CSS面試
這三個關於Python包匯入的知識點你知道嗎
2021-01-26
Python
這三個關於Python包匯入的知識點你知道嗎？
2021-01-16
Python
年終小盤點：這十八個Android開發必備知識點，你都知道嗎？
2020-01-07
Android
CSS基本知識點——帶你走進CSS的新世界
2022-07-07
CSS
精選Spring Boot三十五道必知必會知識點！
2019-03-13
Spring Boot
這 20 多個高併發程式設計必備的知識點，你都會嗎？
2020-01-04
程式設計
【譯】面試 30 秒
2019-03-20
面試
css必備知識點
2019-03-06
CSS
css細節知識點
2018-06-21
CSS
jquery主要知識點(精簡)
2020-11-22
jQuery
這些喜聞樂見的Java面試知識點，你都掌握了嗎？
2019-10-18
Java面試
這些必會的計算機網路知識點你都掌握了嗎
2020-12-18
計算機網路
完成一個城市選擇元件（阿里前端題目,內附知識點、思路）
2018-03-27
元件阿里前端
疫情被裁？不要愁！給你2020安卓開發精選面試題及答案！
2020-02-19
安卓面試題
【翻譯】使用這20個好的css技巧提升你的CSS技能
2018-03-15
CSS
這些鮮為人知的前端冷知識，你都GET了嗎？
2020-12-02
前端
Netty中的這些知識點，你需要知道！
2020-06-19
Netty
react小知識(1) – 這個defaultProps可以刪掉嗎?
2019-01-06
React
[程式設計] 你真的會寫函式註釋？這裡給你一個答案
2023-12-04
程式設計函式
想幫助改善 GNOME 嗎？這個新工具給了你這個機會！
2022-08-27
面試官帶你學Android——面試中Handler 這些必備知識點你都知道嗎？
2020-10-12
面試Android
初識python你應該知道的6個知識點！
2021-06-11
Python
給你兩個老婆，你選哪個？
2018-05-30
Nacos必知必會：這些知識點你一定要掌握！
2023-05-15
CSS知識點面試總結
2020-02-24
CSS面試
css&html面試知識點
2018-10-15
CSSHTML面試
ubuntu點選知識積累
2024-09-19
Ubuntu
關於Linux系統，這些知識你都瞭解嗎?
2019-12-26
Linux
寶付知識普及時間丨有關征信的知識點，你真的清楚嗎？
2021-10-13
關於JVM，你必須知道的這些知識點
2020-12-20
JVM
華為雲GaussDB（DWS）記憶體知識點,你知道嗎?
2020-08-03
記憶體
初學Java你有這些疑惑嗎？本文給你幾個建議
2021-12-10
Java
精選乾貨：Java精選筆試題附答案
2019-10-08
Java筆試
30秒內便能學會的30個超實用Python程式碼片段
2019-10-10
Python
一道面試題牽出12個前端硬核知識點，你能答出幾個？
2022-03-15
面試題前端
Oracle 選擇題知識點整理
2019-12-31
Oracle

【譯】這44個 CSS 精選知識點你能在30 秒內給出答案嗎？

寫在前面

佈局

1. 盒模型重置

2. 清除浮動更好的方式

3. 不變寬高比

4.使用表格居中

5. 使子元素均勻分佈

6. 讓圖片在容器中顯示的更舒適

7. 使用 flexbox 居中

8.將元素垂直居中於另一個元素。

9. 使用網格居中

10. 使最後一項佔滿剩餘高度

11. 屏外隱藏元素

12. 使用transform居中子元素

視覺

13.多行文字截斷顯示

14. 畫一個圓

15. 列表計數器

16.自定義滾動條

17. 自定義文字選擇的樣式

18. 建立動態陰影

19. 蝕刻文字效果

20. Focus Within 偽類

21. 指定元素的全屏

22.漸變文字

23. 漸變跟蹤

24. :not 偽類選擇器

25.溢位滾動漸變

26.給文字新增漂亮的下劃線

27. 重置所有樣式

28. 形狀分隔符

29. 系統字型

30. css 開關

31. 用 css 畫一個三角形

32. 斑馬條紋列表

動畫

33.彈跳 loading 動畫

34. 按鈕邊框動畫

35.甜甜圈旋轉器

36.緩動效果

37.高度過度

38.懸停陰影動畫

39.懸停下滑線動畫

互動

40. 禁用選擇

41. 彈出選單

42.兄弟元素淡化

其他

43. 計算函式 Calc()

44. css 自定義變數

相關文章