前端必須要掌握的幾個CSS3的屬性

来源:http://www.cnblogs.com/hwylx/archive/2016/07/12/5663069.html
-Advertisement-
Play Games

隨著Css3和html5的風靡，越來越多的前端人員開始學習Css3，今天的文章就是來說說前端應該掌握10個Css3屬性。 1. Border-radius Border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個屬性。當設計者害怕一個層在將 ...


隨著Css3和html5的風靡，越來越多的前端人員開始學習Css3，今天的文章就是來說說前端應該掌握10個Css3屬性。

1. Border-radius

Border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個屬性。當設計者害怕一個層在將在不同的瀏覽器之間以不同的方式顯示時，CSS圓角，一個很初級的知識，將引導他們開始學習。 我們為移動瀏覽器提供一個備用的觀看體驗的想法都非常好。奇怪的是，當這種方法出現在桌面瀏覽器上時，他們卻又不這麼認為。border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個屬性。當設計者害怕一個層在將在不同的瀏覽器之間以不同的方式顯示時，CSS圓角，一個很初級的知識，將引導他們開始學習。我們為移動瀏覽器提供一個備用的觀看體驗的想法都非常好。奇怪的是，當這種方法出現在桌面瀏覽器上時，他們卻又不這麼認為。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
許多讀者也許不會意識到我們可以用這個屬性來做一個圓。

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
 border-radius: 50px;

圓

 

2. Box-shadow

接下來是非常普遍的Box-shadow，可以使你的元素立即美化，只是記得不要把值設得太離譜。

 

 

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

box-shadow的四個參數

  1. x-offset x軸偏移
  2. y-offset y軸偏移
  3. blur 模糊值
  4. color of shadow 陰影顏色

現在，許多人不知道可以一次運用多個box-shadows，這樣做會產生一些有趣的效果。在下圖中，我使用藍色和綠色陰影來放大一下效果。

box-shadow

Box-shadow

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

Clever Shadows

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

The CSS 

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -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

Text-shadow是我們可以省略首碼的幾個CSS屬性之一，類似的還有box-shadow，它必須應用於文本，並它們有相同的四個參數：

  1. x-offset 水平位移
  2. y-offest 垂直位移
  3. blur 模糊值
  4. color of shadow 陰影顏色
 h1 {
    text-shadow: 0 1px 0 white;
    color: #292929;
 }

Text-Outline和box-shadow一樣，它可以設置多個陰影通過逗號分隔符。例如，我們創建文本框的輪廓，當Webkit不支持stroke效果，我們可以使用下麵的代碼讓更多的瀏覽器支持（雖然不是很美觀）。

4. Text-Stroke

使用這個方法時要註意了，只有Webkit（Safari， Chrome， iPhone）在最後的幾年內還支持這個屬性。其實，雖然我可能是錯的，Text-stroke還不屬於CSS3範疇的一部分。在這種情況下，使用白色字體時，Firefox會顯示一個空白頁面。要解決此問題，你即可以使用Javascript，也可以通過使用一種不同於背景顏色的文字顏色。

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

Feature Detection我們如何為firefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。 通過feature detection，我們可以利用JavaScript來測試某屬性是否可用，如果不行，我可 就要採用備用的。 再回到text-stroke的問題上，為不支持此屬性的瀏覽器設定一個備用黑色（目前的除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是否支持此元素。如果不支持，我們會把標題由白色 設置成黑色。

5. Multiple Backgrounds

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

目前我們已經可以使用這種比較靈活的方式去重定義背景圖像的大小。

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的x，y參數。 最新版本的Chrome 和 Safari支持此屬性，但我們還是要用舊的方法支持舊的瀏覽器。

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

7. text-overflow

瀏覽器最初開發文本溢出屬性可以設定兩個值：clip ellipsis 此屬性支持切斷容器中的文本，而且也給出了一個省略號的特性。

text-overflow

Text-overflow 

 .box {

   -o-text-overflow: ellipsis;
   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屬性或是停用它，使之生效，在on:hover中我們可以使得white-space的 normal屬性。現在正常了。 知道嗎？您還可以指定自己的字元串，應使用省略號的位置。這樣做來修飾要顯示的文本字元串。

8. Flexible Box Model

Flexible Box Model將最終使我們遠離類似float的困擾。雖然是要給你的頭部換一個新的屬性，但一旦你這麼做了，將終身受益。 做個演示，創建簡單的兩列佈局。

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

首先我們要設定一個容器，然後指定它的寬和高，即便是沒有實質性的內容在裡面。

#container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;
}

接下來分別定義#main和aside的背景色

 #main {

   background: yellow;
}   

aside {
   background: red;
} 

到目前為了還沒有看出什麼效果來。

Flexible Box Model
值得一提的是，雖然我們設置了display:box模型，它的子元素會占據整個垂直空間。這就是它的預設box-align屬性stretch。 看看有什麼效果產生，當我們設置了#main的寬度後。
#main {
  background: yellow;
  width: 800px;
}

Flexible Box Model

Flexible Box Model

但是我們仍有個疑問，為什麼aside不占據剩餘的全部空間呢？我們可以用新屬性box-flex來試下。 box-flex 使得元素占據整個空間。

aside {
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
 }

使用這個屬性後，不管#main有多寬，aside都將占據整個可用的空間。同時你也不必擔心諸如float等產生的問題，像使得元素被排擠到下一 行。

Flexible Box Model

Flexible Box Model

我只是在這兒膚淺的說一下，請參閱保羅愛爾蘭優秀文章的詳細信息。然而，使用此方法的時候也應註意一下相容問題，例如老的瀏覽器應該先測試下，並且 提供必要的備註。

9. Resize

只有Firefox 4和Safari 3支持此屬性。Resize是CSS3 UI模型中的一部分，可用於重定義textarea的大小。

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

預設情況下webkit瀏覽器和Firefox 4支持水平和垂直方向上的重定義。

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

可能的值：

  1. both： 重定義水平和垂直方向
  2. horizontal： 水平調整大小限制
  3. vertical： 垂直調整大小限制

none： 不支持重定義

10、 Transition

也許CSS3最令人興奮的增補，就是在沒有 JavaScript 的元素的情況下產生動畫。好像IE9還不支持此功能，但這並不代表你不能使用這個功能，關鍵是在於提高技能。 現在模仿一個效果，當滑鼠滑過右側鏈接時，文本向右滑動。

The HTML 

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

The CSS

ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover {
    padding-left: 6px;
 }

transition 有三個參數：

  1. The property to transition. （Set this value to all if needed） 轉換屬性。（設置此值為所有如有需要）
  2. The duration 持續時間
  3. The easing type 緩動類型

實例

 

為什麼我們不將transition直接應用到hover上呢？是因為我們只是在mouseover時生效，當mouseout時元素將立即返回到 其最初的狀態。 因為我們對效果做了調整，所有對舊的瀏覽器不會產生任何影響。 接下來是通過文章所學，我們來建立的一個簡潔的效果。大家可以通過查看源碼來學習來。具體如何創建我就不翻譯了。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端開發之工程首頁
    1. 基本資料 http://v3.bootcss.com/ http://www.ziqiangxuetang.com/bootstrap/bootstrap-tutorial.html 2. 首頁的組成 2.1 導航欄 http://v3.bootcss.com/components/#nav ...
  • Support for AMD usage of jwplayer (require js)
    使用require js 模塊化代碼時，其中播放器用的是jwplayer7.x 然後載入jwplayer.js後總是報license無效（license已經加入），最後在jwplayer官網論壇里找到問題： The reason seems to be that the flash player n ...
  • [原創]CSS3打造動態3D氣球
    周末在江邊晨跑的時候發現很多 當時心血來潮就想，應該可以在網頁中實現一下 這幾天得閑就做了一下，效果如下 (儘量在最新版本的chrome或者firefox中查看) demo下載在文章最後 預覽 <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> ...
  • Emmet 真是個好東西
    他的官網：http://docs.emmet.io/ 給廣大程式員節省時間 Value aliases Emmet has a few aliases for commonly used values: p → % e → em x → ex You can use aliases instead ...
  • 響應式設計
    1.什麼是響應式設計？ 響應式設計就是在網站開發過程中根據用戶操作以及設備的環境進行相應的操作和佈局，讓網站針對不同系統平臺、屏幕尺寸、屏幕定向等進行智能化調整，進行相對應的佈局，如在pc端、iphone、Android、ipad，實現了在智能手機和平板電腦等多種智能移動終端瀏覽效果的流暢，防止頁面 ...
  • css中的定位屬性position
    同樣的也是上課的時候發現學生難以理解的一些問題拿出來記錄一下，希望幫助初學者。 在css中定位屬性position的運用在頁面中是很常用的，特別是一些結合js來實現的一些特效經常會用到定位屬性，比如滑鼠滑過顯示被隱藏的盒子， banner的切換，還有之前寫的jquery實現京東商品分類導航的類似這樣 ...
  • LayaAir引擎——（一）
    LayaAir是LayaBox推出的Html5游戲引擎，支持 ActionScript3、TypeScript、JavaScript，開源，並且商用免費。 LayaAir IDE 是一款使用LayaAir 引擎來開發應用，游戲的集成開發環境。 LayaAir IDE 下載地址： http://pan ...
  • 原生AJAX封裝
    回歸下原生js，網上看到的AJAX封裝，遂拿來改改，不知還有何弊端，望指出！ 假設一個需求，後端要求傳入兩個數字n1、n2，然後返回總和。 當其中一個參數為空或者不是數字時，返回：{"status":"0", "msg":"參數有誤！"} 當正確的時候，返回：{"status":"1", "sum" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類