字體樣式
text-decoration
快捷鍵
縱向滾輪: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字體外發光
text-shadow:0 0 0.2em #ff4200, -0 -0 0.2em #ff4200;
0:陰影水平偏移值(可取正負值);
0px:陰影垂直偏移值(可取正負值);
0px:陰影模糊值;
rgba(0,0,0,0.8):陰影顏色;
text-shadow
該屬性為文本添加陰影效果
text-shadow: h-shadow v-shadow blur color;
h-shadow: 水平陰影的位置(陰影水平偏移量),可為負值,必需
v-shadow: 垂直陰影的位置(陰影垂直偏移量),可為負值,必需
blur: 陰影模糊的距離(默認為0),可選
color: 陰影顏色(默認為當前字體顏色),可選
乍一看,text-shadow 屬性僅僅是用來設置文本陰影的,似乎並不能實現字體發光效果。
其實不然,這正是 text-shadow 屬性的精妙之處。
當陰影的水平偏移量和垂直偏移量都為0時,陰影就和文本重合了
這時,如果增大陰影模糊的距離,就可以達到字體外發光的效果了。
當然,為了使外發光更加酷炫,還需要使用到 text-shadow 的另一個特性: 同時設置多個陰影(使用逗號分隔設置多個陰影)
閱讀更多 碼農編程 的文章