html-css基礎


html-css基礎

字體樣式

html-css基礎

text-decoration

html-css基礎


html-css基礎

快捷鍵

html-css基礎

縱向滾輪:overflow-y: auto; overflow-x:hidden;

css字體漸變

background: linear-gradient(to top, #9d201e, #da2e22);-webkit-background-clip: text;color: transparent;

linear-gradient:線性漸變

to top, #9d201e, #da2e22 :從上到下,#9d201e到#da2e22 漸變(漸變方式); -webkit-background-clip: text:意思是,以區塊內的文字作為裁剪區域向外裁剪,文字的背景即為區塊的背景,文字之外的區域都將被裁剪掉

background-clip: border-box; // 背景延伸到邊框外沿(但是在邊框之下) background-clip: padding-box; // 邊框下面沒有背景,即背景延伸到內邊距外沿。 background-clip: content-box; // 背景裁剪到內容區 (content-box) 外沿。

text-stroke: 1px #f00; 字體邊框顏色

css字體外發光


html-css基礎

text-shadow:0 0 0.2em #ff4200, -0 -0 0.2em #ff4200;

0:陰影水平偏移值(可取正負值);

0px:陰影垂直偏移值(可取正負值);

0px:陰影模糊值;

rgba(0,0,0,0.8):陰影顏色;

text-shadow


html-css基礎

該屬性為文本添加陰影效果

text-shadow: h-shadow v-shadow blur color;

h-shadow: 水平陰影的位置(陰影水平偏移量),可為負值,必需

v-shadow: 垂直陰影的位置(陰影垂直偏移量),可為負值,必需

blur: 陰影模糊的距離(默認為0),可選

color: 陰影顏色(默認為當前字體顏色),可選

乍一看,text-shadow 屬性僅僅是用來設置文本陰影的,似乎並不能實現字體發光效果。

其實不然,這正是 text-shadow 屬性的精妙之處。

當陰影的水平偏移量和垂直偏移量都為0時,陰影就和文本重合了

這時,如果增大陰影模糊的距離,就可以達到字體外發光的效果了。

當然,為了使外發光更加酷炫,還需要使用到 text-shadow 的另一個特性: 同時設置多個陰影(使用逗號分隔設置多個陰影)


分享到:


相關文章: