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

2022-06-12 03:42:11 字數 798 閱讀 8464

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

在w3school上css3被劃分為模組,其中最重要的css3模組包括:

選擇器框模型

背景及邊框、文字效果

2d/3d轉換

動畫多列布局

使用者介面

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

一、邊框特性

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

/*圓角邊框*/

div

/*邊框*/

div

二、陰影效果

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

/*box-shadow:水平陰影 垂直陰影 模糊距離 陰影的顏色*/
/*給div新增陰影*/

div/*給標題新增陰影*/

h1

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

文字溢位text-overflow 的區別

未完待續......

css3 的一些新屬性

1.邊框新屬性 border radius border shadow border image 2.背景新屬性 background size background origin 規定背景的定位區域 3.文字效果 text shadow 文字陰影 word warp 強制換行 4.字型 font ...

CSS3 一些屬性

1.flex direction 調整主軸方向 預設為水平方向 包括row column row reverse column reverse 2.justify content 主軸方向對齊,可以調整元素在主軸方向上的對齊方式,包括flex start flex end center space ...

css3一些屬性

1.第乙個引數預設朝外,可設定朝內inset或者不寫 2.第二個引數必須寫,左右水平偏移量 3.第三個引數必須寫,上下垂直偏移量 4.第四個引數可選,擴散blur寬度 5.第五個引數可選,顏色 box shadow裡面引數可以疊加,eg box shadow inset 1px 1px 1px pi...