第一种更好用：
主要是样式：
.minjiancs a{ display: block;margin:0 .15rem;border-width:10px;border-style:solid;border-color:transparent;border-image: url(images/icon_border.png) 18 18 round;position: relative;background-color: #f2ebdf}
下面这种方法不灵活：
Html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="box1"> <div class="public_bzhh_title"><span class="left"></span><span class="right"></span><span class="center">通过八字合婚您将获得以下内容</span></div> </div> <div class="box2"> <div class="public_bzhh_title"><span class="left"></span><span class="right"></span><span class="center">通过八字合婚您将获得以下内容</span></div> </div> </body> </html>
CSS样式代码：
* {margin: 0;padding: 0;} body{ max-width: 640px; margin: 0 auto; background-color: #f1e8e1; } .left{ float: left; } .right{ float: right; } .box1{ margin: 10px;padding: 10px; background-color:#ffc99f; } .box2{ margin: 10px;padding: 10px; background-color:#fff; } .public_bzhh_title{ margin:15px 10px; height: 38px; line-height: 38px; color: #fff; text-align: center; } .public_bzhh_title span{ display: block; } .public_bzhh_title span.left, .public_bzhh_title span.right{ background: url(../images/title_edge.png) no-repeat; width:8px; height: 38px; background-size: 100% 100%; } .public_bzhh_title span.center{background-color: #d23037; overflow: hidden; } .public_bzhh_title span.right{transform: rotateY(180deg); }
images：
效果图：
