不一样的方式实现text-decoration: underline;

你们有没有遇到过这样的需求呢???


用text-decoration: underline;实现的是这样的,


这样产品是不接受的。

解决方法,利用背景图可以实现的。如下:

背景图  

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css下划线</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<style type="text/css">
p{
width: 90%;
text-align: center;
font-size: 12px;
color: #884e28;
background-image: url(repeat.png);
background-size: auto 21px;
    line-height: 21.5px;
    background-repeat: repeat;
}
  </style>
</head>
<body>
<p>我是用背景图加的下划线我是用背景图加的下划线我是用背景图加的下划线</p>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_39466493/article/details/79741840
今日推荐