css3常見新功能介紹

新的元素選擇器

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

border-radius

又稱為圓角屬性，通常使用該屬性將圖片圓角化，如頭像。

border-radius: 50%;

border-radius另一個常用的手段是CSS動畫。

word-wrap & text-overflow

word-wrap屬性用來指出瀏覽器在單字內進行斷句，防止字串太長而找不到它的自然斷句點時產生的溢位。

word-wrap: break-word;

text-overflow用於文字溢出:

單行縮略的實作如下:

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

多行縮略實作如下(主要針對webkit核心):

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

background

主要是以下三個屬性:

• background-clip 規定背景的繪製區域, 取值為border -box | padding-box | content-box | no-clip

• background-origin 規定背景的定位區域, 取值為border | padding | content

• #background-size 規定背景圖片的尺寸, 取值為[ | | auto]{1,2} | cover | contain

##建議教學：

css快速入門

以上是css3常見新功能介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！