css之为文本添加线性渐变和外描边
生活随笔
收集整理的這篇文章主要介紹了
css之为文本添加线性渐变和外描边
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css之為文本添加線性漸變和外描邊
?一、效果：
描邊：描邊+漸變：
二、描邊：
api：text-stroke
問題：text-stroke的描邊是居中描邊，無法直接設置外描邊
解決：在before中添加文本，設置字體描邊，絕對定位在文本下方
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{background:blue}h2 {font-size: 31px;font-weight: 800;color: #70b4d9;position: relative;z-index: 1;}h2::before {content: attr(data-text);position: absolute;-webkit-text-stroke: 6px #fff;z-index: -1;}</style> </head> <body><h2 data-text="數據采集">數據采集</h2> </body> </html>三、添加漸變
api：
background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;原理：字體漸變的原理是將背景圖片剪切為字體，然后將字體顏色取消。
問題：字體漸變的實質是背景圖片，所以無法在其下面再墊一層背景
解決：給文本套一層span，使漸變為span的背景，然后在父標簽墊描邊背景。
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{background:blue}h2 {font-size: 31px;font-weight: 800;color: #70b4d9;position: relative;z-index: 1;}h2>span{background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}h2::before {content: attr(data-text);position: absolute;-webkit-text-stroke: 6px #fff;z-index: -1;}</style> </head> <body><h2 data-text="數據采集"><span>數據采集</span></h2> </body> </html>
鉆研不易，轉載請注明出處、、、、、、
?
轉載于:https://www.cnblogs.com/s313139232/p/10530634.html
總結
以上是生活随笔為你收集整理的css之为文本添加线性渐变和外描边的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 连号区间数（2013年第四届c/c++
- 下一篇： PHP正则表达式大全