css3 文字的設定

2022-08-04 23:33:21 字數 872 閱讀 7697

1.text-shadow 有3個length引數,第1個表示水平偏移,第2個表示垂直偏移,第3個表示模糊(可選) .text11

2.-webkit-text-stroke 描邊的文字: -webkit-text-stroke: 1px yellow

描邊為1px

3.box-reflect 文字倒影: -webkit-box-reflect: below 10px;

文字和倒影之間相隔10px, -webkit-box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));

可使用gradient影象或image作為遮罩。

4.text-fill-color 文字填充  -webkit-text-fill-color:#f00;

直接填充, -webkit-text-fill-color:transparent;-webkit-text-stroke:1px #000;

鏤空文字。

background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;

漸變文字。

background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; -webkit-text-stroke:1px transparent;

加上描邊,效果會更好一點。

可以放乙個gif,效果也是可以的。

css3文字效果

text shadow 在css3中我們可以給單調的文字加上陰影效果,賦予文字美感 text shadow h shadow v shadow blur color h shadow 必須 水平陰影的位置,允許負值 v shadow 必需 垂直陰影的位置,允許負值 blur 可選 模糊的距離 銳化陰...

css3 文字陰影

text shadow 基本語法 textshadow none length none shadow shadow textshadow none color color length 表示由浮點數字和單位識別符號組成的長度值,可為負值,指定陰影的水平延伸距離 color 表示顏色。陰影位於左上角...

CSS3 文字陰影

例項 基礎的文字陰影效果 h1語法 text shadow h shadow v shadow blur color 注釋 text shadow 屬性向文字新增乙個或多個陰影。該屬性是逗號分隔的陰影列表,每個陰影有兩個或三個長度值和乙個可選的顏色值進行規定。省略的長度是 0。值描述 h shado...