前端必須要掌握CSS3的屬性有哪些

小編給大家分享一下前端必須要掌握CSS3的屬性有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1. Border-radius

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

-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的四個參數(shù)

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

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

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，它必須應用于文本，并它們有相同的四個參數(shù)：

1.x-offset 水平位移
2.y-offest 垂直位移
3.blur 模糊值
4.color of shadow 陰影顏色

 h2 {
    text-shadow: 0 1px 0 white;
    color: #292929;
 }
 
 Text-Outline和box-shadow一樣，它可以設置多個陰影通過逗號分隔符。例如，我們創(chuàng)建文本框的輪廓，當Webkit不支持stroke效果，我們可以使用下面的代碼讓更多的瀏覽器支持（雖然不是很美觀）。

4. Text-Stroke

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

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

Feature Detection

我們?nèi)绾螢閒irefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。 通過feature detection，我們可以利用JavaScript來測試某屬性是否可用，如果不行，我可 就要采用備用的。 再回到text-stroke的問題上，為不支持此屬性的瀏覽器設定一個備用黑色（目前的除webkit外）。

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

首先我們設定一個h2元素，然后執(zhí)行，通過樣式屬性以確定

-webkit-text-stroke

是否支持此元素。如果不支持，我們會把標題由白色 設置成黑色。

5. Multiple Backgrounds

Background屬性在CSS3樣式中已經(jīng)徹底改革，開始支持多背景圖片。 舉個簡單的例子，如果沒和合適的圖像，我們將使用兩個教程的圖像作為我們的背景，當然在程序中你可能會用紋理，也許是漸變作為圖像。

.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

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

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

上面的代碼使得背景圖像已經(jīng)占據(jù)了整個可用空間。但是，如果我們使用一個特殊的圖片去占據(jù)body元素的整個空間而無論窗口有多寬，那又怎么做？

body, html { height: 100%; }

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

對，就是這么做，分別定義background-size的x，y參數(shù)。 最新版本的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

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

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;
}

或許你會考慮當鼠標經(jīng)過時顯示全部的文本內(nèi)容。

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

有點奇怪，這看起來并不像是重置text-overflow屬性或是停用它，使之生效，在on:hover中我們可以使得white-space的 normal屬性?，F(xiàn)在正常了。 知道嗎？您還可以指定自己的字符串，應使用省略號的位置。這樣做來修飾要顯示的文本字符串。

8. Flexible Box Model

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

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

首先我們要設定一個容器，然后指定它的寬和高，即便是沒有實質(zhì)性的內(nèi)容在里面。

#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;
}

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

 值得一提的是，雖然我們設置了display:box模型，它的子元素會占據(jù)整個垂直空間。這就是它的默認box-align屬性stretch。 看看有什么效果產(chǎn)生，當我們設置了#main的寬度后。

#main {
  background: yellow;
  width: 800px;
}

Flexible Box Model

但是我們?nèi)杂袀€疑問，為什么aside不占據(jù)剩余的全部空間呢？我們可以用新屬性box-flex來試下。 box-flex 使得元素占據(jù)整個空間。

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都將占據(jù)整個可用的空間。同時你也不必擔心諸如float等產(chǎn)生的問題，像使得元素被排擠到下一 行。

Flexible Box Model

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

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： 水平調(diào)整大小限制
3.vertical： 垂直調(diào)整大小限制

none： 不支持重定義

10、 Transition

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

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 有三個參數(shù)：

1. The property to transition. （Set this value to all if needed） 轉(zhuǎn)換屬性。（設置此值為所有如有需要）

2. The duration 持續(xù)時間

3. The easing type 緩動類型

為什么我們不將transition直接應用到hover上呢？是因為我們只是在mouseover時生效，當mouseout時元素將立即返回到 其最初的狀態(tài)。 因為我們對效果做了調(diào)整，所有對舊的瀏覽器不會產(chǎn)生任何影響。 

以上是“前端必須要掌握CSS3的屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！