css3樣式總結 漸變，文字樣式等

2022-09-02 10:21:11 字數 3850 閱讀 4743

一.css3的文字屬性

1.陰影

text-shadow：水平陰影  垂直陰影  模糊半徑  陰影顏色；

doctype html


>


<


html


>


<


head


>


<


title


>css3 text-shadow屬性


title


>


<


style 


type


="text/css"


>


#lvye


style


>


head


>


<


body


>


<


div 


id="lvye"


>我的中國心


div>


body


>


html


>


text-shadow可以接收多個陰影效果值；可以製作凸出的字，


設定上與左為白色即可，下與右是凹陷的字效果
2.text-stroke文字描邊；

doctype html


>


<


html


>


<


head


>


<


title


>css3 text-stroke屬性


title


>


<


style 


type


="text/css"


>


div 


#div2


style


>


head


>


<


body


>


<


div 


id="div1"


>文字沒有被描邊


div>


<


div 


id="div2"


>文字被描了1畫素的紅邊


div>


body


>


html


>
3.text-overflow:ellipsis(省略號顯示)/clip（直接裁掉）;

doctype html


>


<


html


>


<


head


>


<


title


>css3 text-overflow屬性


title


>


<


style 


type


="text/css"


>


#div1


style


>


head


>


<


body


>


<


div 


id="div1"


>2023年已經漸行漸遠，有些記憶卻歷久彌新。回憶過去，除了喜怒哀樂的情緒，還有一樣東西誰也繞不開，那就是責任。2023年，當乙個大國面對世界的期待，當一名軍人或醫生遇到需要守護的人，當乙個普通人身處危難之中，他們用自己的行動，詮釋了「責無旁貸」這四個字的涵義。


div>


body


>


html


>
4.white-space:nowrap;強制文字在一行內顯示；

5.word-wrap:break-word;強制換行；

6.css3的rgba顏色

rgba中：r是紅色值，g是綠色值，b是藍色值（rgb正常取值是0-255）a是透明度；

用法


rgba(255,255,0,0.5)


rgba(50%,80%,50%,0.5)
二.css漸變型別；

css3漸變共兩種：線性漸變與徑向漸變

①線性漸變，指在一條直線上進行漸變，在網頁中大多數是線性漸變；

background：linear-gradient（方向，開始顏色，結束顏色）

線性漸變的方向也可以是角度（90deg）

>css3 text-shadow屬性

title

>

<

style

type

="text/css"

>

div

style

>

head

>

<

body

>

<

div>

div>

body

>

html

>

css3徑向漸變，是一種從起點到終點顏色從內到外進行圓形漸變（從中間向外拉，像圓一樣）。css3徑向漸變是圓形或橢圓形漸變。與線性漸變區別在於顏色不再沿著一條直線漸變，而是從乙個起點向所有方向漸變。

語法：


background:radial-gradient(position ,shape size,start-color,stop-color)


引數：定義圓心位置、定義形狀圓/橢圓、結束形狀大小、開始顏色、結束顏色



doctype html


>


<


html


>


<


head


>


<


title


>css3徑向漸變


title


>


<


style 


type


="text/css"


>


/*設定div公共樣式


*/div


#div1


#div2


style


>


head


>


<


body


>


<


div 


id="div1"


>在中間顯示黃色圓形


div>


<


div 


id="div2"


>在右下角顯示橘黃色


div>


body


>


html


>
關於size的值問題；開始顏色與結束顏色

徑向漸變可以接收乙個顏色值列表，用於同時定義多種顏色的徑向漸變

語法 


background:-webkit-radial-gradient(red,orange,yellow,green,blue);


預設情況下，徑向漸變顏色節點是均勻分布的，不過我們也可以為每一種顏色新增百分比，來使得各個顏色節點不均勻分布。


background:-webkit-radial-gradient(red5%,green30%,blue60%)

css3樣式文字超出隱藏

overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 一行內容 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 display ...

實用的css3樣式

1.word wrap word wrap normal break word 只在允許的斷字點換行 瀏覽器保持預設處理 斷字 在長單詞或url位址內部進行換行。2.font face internet explorer 9 firefox,chrome,safari,和 opera 支援 woff...

css3樣式有哪些？

2d 轉換 2d 轉換是改變標籤在二維平面上的位置和形狀 移動 translate 旋 rotate 縮放 scale translate 語法 x 就是 x 軸上水平移動 y 就是 y 軸上水平移動 transform translate x,y transform translatex n tr...