CSS:text-fill-color 给文字增加图片蒙版、渐变、描边

发表时间:2019-01-22 14:03    责任编辑:莫都晨晓    浏览:
效果

代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>text-fill-color_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="" />
 
<!--1111111111111111111-->
<!--文字建立图片或渐变蒙版-->
<!--===================-->
<style>
html,body{
margin:50px 0;
}
.text-fill-color{
width:950px;
margin:0 auto;
background:-webkit-linear-gradient(top,#555,#fff 50%,#999 51%,#000); background:url(http://www.jnchenxiao.com/uploads/allimg/180804/1-1PP4092G60-L.jpg) center center no-repeat; 
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold 95px/1.231 georgia,sans-serif;
text-transform:uppercase;
}
</style>
 
<div class="text-fill-color">text-fill-color</div>
 
<!--2222222222222222222-->
<!--文字建立图片或渐变蒙版-->
<!--===================-->
<style>
html,body{
margin:50px 0;
}
.text-fill-color2{
width:950px;
margin:0 auto;
background:-webkit-linear-gradient(top,#555,#fff 50%,#999 51%,#000); 
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold 95px/1.231 georgia,sans-serif;
text-transform:uppercase;
}
</style>
 
<div class="text-fill-color2">text-fill-color</div>
 
<!--33333333333333-->
<!--文字描边-->
<!--===================-->
 
 
<style>
html,body{font:bold 14px/1.5 georgia,simsun,sans-serif;text-align:center;}
.stroke h1{margin:0;padding:10px 0 0;}
.stroke p{
margin:50px auto 100px;font-size:100px;
-webkit-text-stroke:2px #999;
}
.copyright,.info{font-style:italic;}
</style>
 
<div class="stroke">
<h1>描边的文字:</h1>
<p>我是被描了1像素红边的文字</p>
</div>
 
 
</body>
</html>
 
15063366547
286601999
微信咨询