CSS 屬性被分爲不同的類型,如字體屬性、文本屬性、邊框屬性、邊距屬性、佈局屬性、定位屬性、打印屬性等。對於初學者來說,需要熟悉並掌握這些屬性。前面我們已經瞭解了30個CSS選擇器，但是新的CSS3屬性呢？爲此小編也特意整理了10個你需要熟悉的CSS3屬性，來我們一起了解下吧！

1. border-radius

很容易成爲最流行的 CSS3 屬性， border-radius 是 CSS3 的旗艦屬性。雖然許多設計師仍然害怕佈局可能因瀏覽器而異，但像圓角這樣的小步驟是吸引他們的簡單方法！

具有諷刺意味的是，我們都完全同意爲移動瀏覽器提供替代觀看體驗的想法。然而，奇怪的是，有些人在桌面瀏覽時感覺不一樣。

border-radius: 4px;

Circles

有些讀者可能不知道我們也可以用這個屬性創建圓圈。您所要做的就是將半徑設置爲元素寬度或高度的一半。

border-radius: 50px;

而且，如果我們想找點樂子，我們還可以利用靈活框模型（在#8 中詳細介紹）將文本在圓圈內垂直和水平居中。它需要一些代碼，但只是因爲需要補償各種供應商。

display: flex;
align-items: center;
justify-content: center;

2. box-shadow

接下來，我們有 ubiquitous box-shadow，它允許您立即將深度應用到您的元素。只是不要對您設置的值太討厭！

box-shadow: 1px 1px 3px #292929;

box-shadow 接受四個參數：

x offset
y offset
blur
color of shadow

現在，許多人沒有意識到您可以 box-shadows 一次申請多個。這可能會導致一些非常有趣的效果。例如，我們可以使用藍色和綠色陰影來放大每個陰影。

box-shadow: 1px 1px 3px green, -1px -1px 3px blue;

Clever Shadows

通過對 ::before 和 ::after 僞類應用陰影，我們可以創建一些非常有趣的視角。這是一個可以幫助您入門的方法：

HTML

<div class="box">
  <img src="tuts.jpg" alt="Tuts" />
</div>

CSS

.box:after {
 content: "";
 position: absolute;
 z-index: -1; /* hide shadow behind image */
 box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
 width: 70%;
 left: 15%; /* one half of the remaining 30% (see width above) */
 height: 100px;
 bottom: 0;
}

3.text-shadow

與類似 box-shadow，它必須應用於文本，並且它接收相同的四個參數：

x-offset
y-offset
blur
color of shadow

h1 {
  text-shadow: 0 1px 0 white;
  color: #292929;
}

文字輪廓

同樣，就像它的兄弟一樣 box-shadow，我們可以通過使用逗號作爲分隔符來應用多個陰影。例如，假設我們要爲文本創建輪廓效果。雖然 webkit 確實提供了 stroke 效果，但我們可以使用以下方法訪問更多瀏覽器（雖然不是很漂亮）：

body { background: white; }

h1 {
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  color: white;
}

4.text-stroke

小心這種方法。這是一個非標準功能。該 text-stroke 屬性還不是 CSS3 規範的一部分。但是，如果您使用 -webkit- 前綴，現在所有主要瀏覽器都支持它。

h1 {
  -webkit-text-stroke: 3px black;
  color: white;
}

特徵檢測

我們如何爲 Firefox 提供一組樣式，爲 Safari 或 Chrome提供另一組樣式？一種解決方案是使用特徵檢測。

通過特徵檢測，我們可以使用 JavaScript 來測試某個屬性是否可用。如果不是，我們準備後備。

讓我們回到這個 text-stroke 問題。black 讓我們爲不支持這個屬性的瀏覽器設置一個後備顏色（除了webkit 目前）。

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
  var heading = document.getElementsByTagName('h1')[0];
  heading.style.color = 'black';
}

首先，我們創建一個虛擬 h1 元素。然後，我們通過屬性執行完整的腔搜索以確定該 -webkit-text-stroke 屬性是否可用於該元素 style 。如果不是，我們將抓取 Hello Readers 標題，並將其顏色設置 white 爲 black。

請注意，我們在這裏是通用的。如果您需要替換 h1 頁面上的多個標籤，則需要使用 while 語句來過濾每個標題，並相應地更新樣式或類名。

我們也只測試 webkit，當其他瀏覽器最終也可能支持該 text-stroke 屬性時。記住這一點。

5.多種背景

該 background 屬性已經過大修以允許在 CSS3 中使用多個背景。

讓我們創建一個愚蠢的示例，僅作爲概念證明。由於附近沒有合適的圖片，我將使用兩張教程圖片作爲我們的背景。當然，在現實世界的應用程序中，您可能會使用紋理，也可能使用漸變作爲背景。

.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}

上面，通過使用逗號作爲分隔符，我們引用了兩個單獨的背景圖像。請注意，在第一種情況下，它是如何放置在左上位置 ( 0 0) 的，而在第二種情況下，它是如何放置在右上角 ( 100% 0) 的。

確保爲不支持多背景的瀏覽器提供後備方案。他們將完全跳過該屬性，將您的背景留空。

補償舊瀏覽器

要爲舊瀏覽器（如IE7）添加單個背景圖像，請 background 兩次聲明該屬性：第一次爲舊瀏覽器，第二次作爲覆蓋。或者，您可以再次使用 Modernizr。

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}

6.background-size

在現代 CSS 之前，我們被迫使用偷偷摸摸的技術來允許調整大小的背景圖像。

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

上面的代碼將引導背景圖像佔用所有可用空間。例如，如果我們想要一個特定的圖像佔據 body 元素的整個背景，而不管瀏覽器窗口的寬度如何？

body, html { height: 100%; }

body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}

這裏的所有都是它的。該 background-size 屬性將接受兩個參數：分別爲 the x 和 y widths。

雖然最新版本的 Chrome 和 Safari 原生支持 background-size ，但我們仍然需要爲舊瀏覽器使用供應商前綴。

body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}

7.text-overflow

最初是爲 Internet Explorer 開發的，該 text-overflow 屬性可以接受兩個值：

clip
ellipsis

此屬性可用於截斷超出其容器的文本，同時仍爲用戶提供一些反饋，例如省略號。

你知道嗎？ Internet Explorer 從 IE6 開始就提供了對這個屬性的支持？他們創造了它！

.box {
  text-overflow:ellipsis;

  overflow:hidden;
  white-space:nowrap;

  border: 1px solid black;
  width: 400px;
  padding: 20px;

  cursor: pointer;
}

此時，您可能會考慮在用戶將鼠標懸停在框上時顯示整個文本。

#box:hover {
 white-space: normal;
 color: rgba(0,0,0,1);
 background: #e3e3e3;
 border: 1px solid #666;
}

有點奇怪（除非我弄錯了），似乎沒有辦法重置 text-overflow 屬性，或者“關閉它”。爲了模仿這種“關閉”功能， :hover我們可以將 white-space 屬性重新設置爲 normal。這 text-overflow 是有效的，因爲依賴於它才能正常運行。

你知道嗎？您還可以指定自己的字符串，該字符串應用於代替省略號。這樣做將呈現字符串以表示剪切的文本。

8.柔性盒模型

靈活的盒子模型最終將讓我們擺脫那些骯髒的東西 floats。儘管需要花費一些精力來了解新屬性，但一旦您這樣做了，這一切都應該是完全合理的。

讓我們構建一個快速演示，並創建一個簡單的兩列布局。

<div id="container"><font></font>
<font></font>
<div id="main"> Main content here </div><font></font>
<aside> Aside content here </aside><font></font>
<font></font>
</div>

現在對於 CSS：我們首先需要指示 container 將 box. 我還將應用一個通用的寬度和高度，因爲我們沒有任何實際的內容在播放。

#container {<font></font>
   width: 600px;<font></font>
   height: 450px; /* just for demo */<font></font>
<font></font>
   background: #e3e3e3;<font></font>
   margin: auto;<font></font>
<font></font>
   display: flex;<font></font>
}

接下來，讓我們爲演示應用獨特的背景顏色到 #main div, 和 aside.

#main { <font></font>
  background: yellow;<font></font>
}   <font></font>
<font></font>
aside {<font></font>
  background: red;<font></font>
}

在這一點上，沒有太多可看的。

不過，值得注意的一點是，當設置爲 display: flex mode 時，子元素將佔據所有垂直空間；這是默認 align-items 值： stretch.

觀察當我們在 #main 內容區域明確聲明寬度時會發生什麼。

#main {<font></font>
background: yellow;<font></font>
width: 400px;<font></font>
}

嗯，這有點好，但我們仍然有這個問題， aside 沒有佔用所有剩餘空間。我們可以通過使用新 box-flex 屬性來解決這個問題。

flex 指示元素佔用所有可用空間。

aside { <font></font>
  display: block; /* cause is HTML5 element */<font></font>
  background: red;<font></font>
<font></font>
  /* take up all available space */<font></font>
  flex: 1; <font></font>
}

有了這個屬性，無論 #main 內容區域的寬度如何， aside 都將消耗每個規格的可用空間。更好的是，您不必擔心那些討厭的 float 問題，例如元素落在主要內容區域下方。

我們在這裏只觸及了表面。要瞭解有關 Flexbox 的更多信息，請查看我們的完整指南！現在所有主流瀏覽器都支持此功能，您可以預期它可以在超過 99% 的設備上正常工作。

9.resize

該 resize 屬性（CSS3 UI 模塊的一部分）允許您指定如何調整 a textarea 的大小。現在除了 IE 和 iOS Safari 之外，所有主流瀏覽器都支持它。

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

請注意，默認情況下， webkit 瀏覽器和 Firefox 4 允許 textareas 在垂直和水平方向調整大小。

textarea {
  resize: vertical;
}

可能的值

both：垂直和水平調整大小
horizontal: 將調整大小限制爲水平
vertical: 限制垂直調整大小
none：禁用調整大小

10.過渡

也許 CSS3 最令人興奮的新增功能是能夠將動畫應用於元素，而無需使用 JavaScript。

讓我們模擬一個常見的效果，一旦您將鏈接懸停在側邊欄中，文本將略微向右滑動。

HTML

<ul><font></font>
  <li><font></font>
    <a href="#"> Hover Over Me </a><font></font>
  </li><font></font>
  <li><font></font>
    <a href="#"> Hover Over Me </a><font></font>
  </li><font></font>
  <li><font></font>
    <a href="#"> Hover Over Me </a><font></font>
  </li><font></font>
  <li><font></font>
    <a href="#"> Hover Over Me </a><font></font>
  </li><font></font>
</ul>

CSS

ul a {<font></font>
   border-left: 10px orange solid;<font></font>
   transition: border-width 0.4s;<font></font>
}<font></font>
<font></font>
a:hover {<font></font>
 border-width: 20px;<font></font>
}<font></font>

transition 將接受三個參數：

要轉換的屬性。all （如果需要，將此值設置爲）
持續時間
緩動型

我們不直接將應用 transition 到 hover 錨標記的狀態的原因是，如果這樣做，動畫只會在鼠標懸停時生效。在鼠標移出時，元素將立即返回其初始狀態。

因爲我們只是增強了效果，所以我們絕對沒有對舊瀏覽器造成任何傷害。

最終項目

讓我們結合我們在本文中學到的大部分技術，爲顯示翻轉卡片創建一個簡潔的效果。

第 1 步.標記

我們會保持簡單；在我們的 .box 容器中，我們將添加兩個 divs：一個用於正面，另一個用於背面。

<body><font></font>
<font></font>
  <div class="box"><font></font>
    <div>Hello</div><font></font>
    <div> World </div><font></font>
  </div><font></font>
<font></font>
</body>

步驟 2. 水平和垂直居中

接下來，我希望我們的卡片在屏幕上完全居中。爲此，我們將利用靈活盒模型。

由於我們的頁面將只包含這張卡片，我們可以有效地使用該 body 元素作爲我們的包裝器。

body, html { height: 100%; width: 100%; } <font></font>
<font></font>
body {<font></font>
 display: flex;<font></font>
 align-items: center;<font></font>
 justify-content: center;<font></font>
}

步驟 3. 爲盒子造型

我們現在將樣式化我們的“卡片”。

.box {<font></font>
 background: #e3e3e3;<font></font>
 border: 1px dashed #666;<font></font>
 margin: auto;<font></font>
 width: 400px;<font></font>
 height: 200px;<font></font>
 cursor: pointer;<font></font>
 position: relative;<font></font>
 transition: all 1s;<font></font>
}

請注意，我們還指示此元素偵聽元素狀態的任何更改。當它們發生時，我們將在一秒鐘 ( ) 的過程中轉換更改（如果可能transition: all 1s）。

第 4 步。有效的陰影

接下來，正如我們在本文前面所瞭解的，我們將通過使用 ::after 僞類來應用一個很酷的陰影。

.box::after {<font></font>
 content: "";<font></font>
 position: absolute;<font></font>
 width: 70%;<font></font>
 height: 10px;<font></font>
 bottom: 0;<font></font>
 left: 15%;<font></font>
 z-index: -1;<font></font>
 box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4);<font></font>
}

div步驟 5. 爲孩子設計造型

此刻，孩子 div們還在彼此的正上方。讓 position 他們絕對，並指示他們佔用所有可用空間。

.box > div {<font></font>
 position: absolute;<font></font>
 width: 100%;<font></font>
 height: 100%;<font></font>
 top: 0;<font></font>
 left: 0;<font></font>
 background: #e3e3e3;<font></font>
 transition: all 0.5s ease-in-out;<font></font>
<font></font>
 font: 45px/200px bold helvetica, arial, sans-serif;<font></font>
 text-align: center;<font></font>
 text-shadow: 0 1px 0 white;<font></font>
}

步驟 6. 固定正面

參考上圖；注意我們卡片的背面是如何默認顯示的？這是因爲，由於元素在標記中出現的位置較低，因此它會收到較高的 z-index. 讓我們解決這個問題。

/* Make sure we see the front side first */<font></font>
.box > div:first-child {<font></font>
 position: relative;<font></font>
 z-index: 2;<font></font>
}

步驟 7. 旋轉卡片

現在是有趣的部分; 當我們將鼠標懸停在卡片上時，它應該翻轉並顯示卡片的背面。爲了達到這個效果，我們使用了轉換和 rotateY 函數。

.box:hover {<font></font>
 transform: rotateY(180deg);<font></font>
}

步驟 8. 鏡像文本

這看起來不是很棒嗎？但是，現在，文本似乎是鏡像的。這當然是因爲我們改造了容器。div 讓我們也通過將孩子旋轉180 度來抵消這一點。

.box:hover > div:first-child {<font></font>
 opacity: 0;<font></font>
}<font></font>
<font></font>
.box:hover div:last-child {<font></font>
 transform: rotateY(180deg);<font></font>
}

使用最後一點代碼，我們已經實現了整潔的效果！

爲幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，雲服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規範，命名規範，項目代碼規範，SEO優化規範

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，雲服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只爲實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自博客園！老師會邀請你進入學習，並給你發放相關資料。

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

10 個你需要熟悉的 CSS3 屬性

1. border-radius

Circles

2. box-shadow

Clever Shadows

HTML

CSS

3.text-shadow

文字輪廓

4.text-stroke

特徵檢測

5.多種背景

補償舊瀏覽器

6.background-size

7.text-overflow

8.柔性盒模型

9.resize

可能的值

10.過渡

HTML

CSS

最終項目

第 1 步.標記

步驟 2. 水平和垂直居中

步驟 3. 爲盒子造型

第 4 步。有效的陰影

div步驟 5. 爲孩子設計造型

步驟 6. 固定正面

步驟 7. 旋轉卡片

步驟 8. 鏡像文本

前端加薪必備：掌握這10個利於SEO優化的HTML標籤吧

Git從入門到實踐，掌握現代軟件開發必備工具！

記住這12個要點，你也能打造出讓HR和技術主管前一亮的前端簡歷

從零入門Vue.js！六步學習路線和知識體系盤點詳解！

CSS 中的 BFC 是什麼，有什麼作用？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結