css3的一些新屬性及部分用法

居老師的狗子發表於2019-02-26
CSSS3

　　　CSS3是CSS（層疊樣式表）技術的升級版本，增加了很多新屬性，我們在web開發中採用css3技術可以提高程式的效能以及使用者體驗。而且一般面試中會問到知道哪些新增加的屬性，我們不可能將所有東西一一複述給面試官，需要自己有一個清晰的思路，可以選擇自己使用過的一些新屬性來闡述。

　　在W3school上css3被劃分為模組，其中最重要的CSS3模組包括：

  1. 選擇器
  2. 框模型
  3. 背景及邊框、文字效果
  4. 2D/3D轉換
  5. 動畫
  6. 多列布局
  7. 使用者介面

　　下面按著自己比較瞭解的往下寫。

一、邊框特性

CSS3對網頁中的邊框進行了一些改進，主要包括支援圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個改進就是圓角邊框，通過CSS3的屬性可以快速實現圓角定義，而不必像css2中再為每個圓角使用不同的圖片。

/*圓角邊框*/
div{
  border:1px solid;
  border-radius:30px;
}
 
/*圖片邊框*/
div{
  border-image:url(border.png) 35 35 round;
 }

二、陰影效果

我們可以給方框新增陰影，也可以給文字新增陰影，在此可以規定水平陰影，垂直陰影、模糊距離以及陰影的顏色的具體值。

/*box-shadow：水平陰影 垂直陰影 模糊距離 陰影的顏色*/
/*給div新增陰影*/
div
{
box-shadow: 10px 10px 5px #888888;
}
/*給標題新增陰影*/
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

三、css3文字自動換行Word-wrap　　

文字溢位Text-overflow 的區別

 

未完待續......

 

相關文章