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

時間 2019-11-05

標籤 css 精選知識給出答案欄目 CSS 简体版

原文原文鏈接

寫在前面

一個週五的晚上，閒來無事整理下本身的 github（常常作收藏黨），今天打算都過一遍，發現一個star很高的項目，裏面有大量的 CSS 片斷，並且標題很誘人，而後又花了將近1個小時從頭至尾過了一遍，其中一些是咱們經常使用的一些知識點，另外也包含一些比較新的屬性的應用，知識點挺多的，爲了讓你們看起來更方便些，而後又花了點（很長很長）時間翻譯成中文。javascript

github.com/30-seconds/… css

固然提早須要和做者溝通下獲得做者的容許，做者但願建立一個倉庫而且和官方保持同步更新，讓更多的人看到。html

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

本文屬於意譯而非直譯，爲了方便理解也增長了一些本身的語言，若是存在誤差或錯誤還請留言指正。java

精選的有用CSS片斷集合，您能夠在30秒或更短的時間內理解這些片斷。css3

本 CSS 精選集合共分爲5類 - 佈局、視覺、動畫、交互、其餘。git

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

佈局

1. 盒模型重置

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

HTMLweb

<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);
}
複製代碼