爆米花带你学编程|html使文字镂空-前端教程-前军教程网

实现文字的镂空效果主要应用了CSS3中的text-stroke属性，通过该属性可以设置文字的描边效果

<!DOCTYPE html>
<html>

<head>
  <title>标题-爆米花</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <script type="text/javascript" src="linkJavaScript.js"></script>
  <meta charset="UTF-8">
  <style type="text/css">
		body{
		   background-image: url('./2.jpg');
		   text-align:center; /*设置文字居中*/
		}
		div{
		   font-family:"华文彩云";/*设置字体*/
		   font-size:30px; /*设置字体大小*/
		   font-weight:bolder; /*设置字体粗细*/
		   -webkit-text-stroke:1px #2be20e;        /*文字描边*/
		   -webkit-text-fill-color:transparent;    /*设置文字的填充颜色*/
		}
	</style>
  <script>
    document.write("hover特效!<br><hr>")
  </script>
</head>

<body>
  <hr>爆米花的内容<br>
  <div>硕人其颀，衣锦褧衣。</div>
<div>齐侯之子，卫侯之妻。</div>
<div>东宫之妹，邢侯之姨，谭公维私。</div>
<div>手如柔荑，肤如凝脂。</div>
<div>领如蝤蛴，齿如瓠犀。</div>
<div>螓首蛾眉，巧笑倩兮，美目盼兮。</div>
<div>硕人敖敖，说于农郊。</div>
<div>四牡有骄，朱幩镳镳。</div>
<div>翟茀以朝。</div>
<div>大夫夙退，无使君劳。</div>
<div>河水洋洋，北流活活。</div>
<div>施罛濊濊，鳣鲔发发。</div>
<div>葭菼揭揭，庶姜孽孽，庶士有朅。</div>
  
</body>

</html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

爆米花带你学编程|html使文字镂空