1.先获取到一张图片
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a{ margin: 100px; height: 33px; display: inline-block; color: pink; background: url(to.png) no-repeat; /*利用背景图片来制作*/ /*导入图片，并且不做铺垫，且默认左开始*/ text-decoration: none; /*去掉链接下面的下滑线*/ line-height: 33px; /*行高，一般与高度相同*/ padding-left: 15px; /*这里就相当于最少要有15px的长度*/ } span{ display: inline-block; height:33px; background: url(to.png) no-repeat right; /*导入图片，并且不做铺垫，且右开始*/ padding-right: 15px; } </style> </head> <body> <a href="#"> <span>zengsf</span> </a> </body> </html>
3.最后结果
