CSS3文字倒影

2022-08-09 23:36:34 字數 717 閱讀 8313

1,文字倒影與文字投影並不是一回事

投影文字跟原文本是平行移動的,而倒影文字與原文本是對稱的

2,文字倒影的屬性是webkit-box-reflect

-webkit-box-reflect: above-10px;

-webkit-box-reflect: below -10px;

-webkit-box-reflect: left-10px;

-webkit-box-reflect: right-10px;

是各個方向的投影,以及投影與原文本圖形之間的距離。

3.可以根據需求自己定義顏色、文字顯示,以及漸變色等。

-webkit-box-reflect: right-10px;

color:red;

或者定義漸變色:

-webkit-box-reflect: below -28px

-webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));

erp

plm

.row1

}

效果圖

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...