整理幾款css3的簡單例項

2021-07-08 22:25:14 字數 1696 閱讀 5578

1.斜切)

html:

你好。這是乙個 div 元素。

你好。這是乙個 div 元素。

css:
顯示效果:

2.css3圓角)

源**:

border-radius 屬性允許您為元素新增圓角邊框! 

顯示效果:

3.css3盒陰影)

源**:

顯示效果:

4.css3漸變)

源**:

從頂部開始的線性漸變。起點是紅色,慢慢過渡到藍色:

注意:internet explorer 9 及之前的版本不支援漸變。

顯示效果:

為了新增透明度,我們使用 rgba() 函式來定義顏色結點。rgba() 函式中的最後乙個引數可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。

源**:

為了新增透明度,我們使用 rgba() 函式來定義顏色結點。rgba() 函式中的最後乙個引數可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。

注意:internet explorer 9 及之前的版本不支援漸變。

顯示效果:

5.css3過渡)

例項:

把滑鼠指標放到 div 元素上,其寬度會從 100px 逐漸變為 300px:

請把滑鼠指標移動到藍色的 div 元素上,就可以看到過渡效果。

注釋:本例在 internet explorer 中無效。

CSS3的過渡屬性簡單例項

在一周的實際上班過程中覺得用到js的地方不算很多,c3倒是很多,這裡先簡單的鞏固下自己的c3的新特性之漸變。d1 width 200px height 200px border 1px solid purple 這是乙個簡單的紫邊正方形,我再寫下面的 d1 hover background purp...

css3 常用整理 (3)

先寫乙個關鍵幀,動畫按這個關鍵幀運動 keyframes move 100 複製 div複製 然後在div上繫結這個關鍵幀,animation和transition很像,有那麼幾個引數值 animation name animation duration animation timing funci...

css3屬性整理

1.div裡面文字自動轉行 word wrap break word 2.溢位隱藏 text overflow clip 溢位隱藏顯示省略號 text overflow ellipsis 3.text fill color 文字內部填充顏色 text stroke color 文字邊界填充顏色 te...