CSS3學習筆記(新屬性)

2022-07-05 10:12:12 字數 1815 閱讀 8457

1. 邊框(圓角邊框、加陰影和用繪製)

新增加 border-radius  box-shadow  border-image

.div1
2.背景

新增加 background-size  background-origin  background-clip

.div1
3、陰影

可以分為box-shadow和text-shadow兩類(即邊框陰影和文字陰影)

#boxshadow

.textshadowsingle
4. 文字效果

新的文字屬性:text-shadow   word-wrap 等

p 允許長單詞換到下一行

5. 字型

eg:

@font-face

檔案 "sansation_bold.ttf" 是另乙個字型檔案,它包含了 sansation 字型的粗體字元。只要 font-family 為 "myfirstfont" 的文字需要顯示為粗體,瀏覽器就會使用該字型。

6.css3透明度

由浮點數字和單位識別符號組成的長度值。不可為負值。宣告用來設定乙個元素的透明度,opacity取值為1的元素是完全不透明的,反之,取值為0是完全透明的,看不見的。1到0之間的任何值都表示該元素的透明程度。

div.opacityl1 div.opacityl2 div.opacityl3
7.盒子模型

display:box;

box-flex:1;(子容器針對父容器的寬度或者高度劃分)

eg:

<

article

class

= 「wrap」

>

<

section

class

="sectionone"

>01<

/section

>

<

section

class

="sectiontwo"

>02<

/section

>

<

section

class

="sectionthree"

>03<

/section

>

<

/article

>

.wrap.sectionone.sectiontwo.sectionthree
wrap必須定義為盒子才能劃分,上面盒子按照3:2:1劃分

box屬性:box-orient | box-direction | box-align | box-pack | box-lines

詳細參考:

8.瀏覽器相容性

大 部分瀏覽器只支援部分css3屬性。最常見的私有屬性是用於webkit核心瀏覽器的(比如, safari), 它們以-webkit-開始,以及gecko核心的瀏覽器(比如, firefox),以-moz-開始,還有konqueror (-khtml-)、opera(-o-)以及internet explorer(-ms-)都有它們自己的屬性擴充套件(目前只有ie8支援-ms-字首)。

css3新屬性學習

box size width 這樣就可以讓我們不必要再去計算盒子增減內邊距後有沒有撐開什麼的,因為無論內邊距如何變化,盒子的大小始終只會等於width。filter blur 5px 濾鏡,css3為我們增加了濾鏡效果,當括號中的數值越大,則越模糊。width calc 100 30px 可以自動計...

CSS3學習筆記1 顏色新屬性

1 css2顏色的表示方法 顏色名 十六進製制 rgb transparent.css color red background color eee color rgb 22,33,0 border color transparent 2 css3新增方法 1 rgba r red,g green,...

CSS3的新屬性

1.線性漸變 linear 線性 gradient 漸變 background image webkit linear gradient top,red 50 yellow 50 yellow90 2.徑向漸變 可以設定數值 百分比 英文 background image webkit radial...