白話CSS3的新特性

2022-03-27 04:56:41 字數 1234 閱讀 8489

宣告:這篇文章不是手冊,所以不會說的很詳細,只是告訴初學者css3顯著的改進有啥,高手老手繞行。

一、在邊框上的改進

1.可以給方框加圓角了,值越大越圓,解決了過去大方框的不美觀

2.可以給控制項加陰影了,讓控制項看著更立體

3.可以用做邊框了,用類似於相框的最好。

二、背景上的改進

1.可以規定background-image的的大小/比例了,不像原來傻乎乎平鋪或嚴絲合縫的切圖。

2.可以規定做背景所處的位置了,根據css盒模型的 border、padding和context的位置放背景。

3.可以用多個背景作為乙個背景呈現了,不過個人覺得這樣不太好,中國這網速渲染背景得多費勁兒。

三、文字上的改進

1.給文字加陰影,這是逮著一種效果往死裡用啊,陰影無處不在。

2.可以自動換行了

3.可以修剪文字了,如果文字超出區域我又不想換行,可以修剪,剪成省略的...也好,簡單粗暴的不顯示也罷,都可以。

4.可以超脫p標籤的限制和繁瑣的縮排換行,讓文字並列顯示,類似於報紙的效果,一列一列的。

四、字型上的改進

五、素材的二維轉換

1.我們現在可以對設計師們給的素材進行平移、放大、縮小、拉伸、轉動操作,這是要撇開ps和js的節奏啊。

六、素材的三維轉換

1.當然現在主要的特效還是在 旋轉上,有待完善啊。

七、元素的過渡

1.啥叫過渡?以上的2、3d轉化它只是靜止狀態的,所以有了過渡。怎麼實現捏?從當前狀態到期望狀態有乙個過程,過去我們用js實現,現在用css鍵值對就可以了,值裡面附上屬性和時間就ok了,利用偽類裡的值作為目標進行觸發,這也挺好。

2.如果這過渡只是單行也沒啥值得誇耀,它可以並行發生,挺好!

八、動畫效果

1.跟過渡乙個原理,只是不用偽類觸發,它是連貫的自動發生的,相當於 setinterval裡的指令碼

九、盒模型上的改進

1.以後使用者再想調節網頁內容顯示的大小可以不用拖拽瀏覽器了,在元素上拖拽就可以。

2.又多了乙個輪廓,不用div套div再費勁調居中也能實現的效果,就是再加個邊框。當然ie和歐朋現在是不支援滴。

就先總結這麼多,以後再豐富

CSS3有哪些新特性?CSS3新特性詳解

本篇文章給大家帶來的內容是關於css3有哪些新特性?css3新特性詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...

css3的新特性

1.文字陰影text shadow text shadow 偏移量x 偏移量y 模糊度 顏色 注意 水平偏移量 正值向右,負值向左 垂直偏移量 正值向下,負值向上 模糊度不能為負數 可設定多個text shadow,每個用逗號分隔 例子 text shadow 1px 2px 3px red,2px...

css3新的特性

圓角邊框border radius 水平值 垂直值 border top left radius 1px 2px 設定左上角圓角 border bottom right radius 設定左下角圓角 border top left radius 設定右上角圓角 border bottom right...