第一种更好用：

主要是样式：

.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:;padding:;}

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：

效果图：

标题title出现不规则背景的更多相关文章

  1. 山寨今日头条的标题title效果

    山寨今日头条的标题title效果 效果: 源码: // // ViewController.m // 今日头条 // // Created by YouXianMing on 14/11/26. // ...

  2. 使用jquery修改标题$("title").html("标题")应注意的问题

    使用jquery修改标题$("title").html("标题")应注意的问题: 如果修改后的标题和原标题一致,jquery会跳过该操作,这种情况再从其他页面回 ...

  3. SEO页面标题Title的优化

    我在一个月前改过页面标题(Title),随后表现是:百度网页快照4天不更新,Google正常.而我仅仅是改了两个词组而已.在建博初期,修改Title的最频繁的时期,下面卢松松就我经历的修改Title过 ...

  4. Xamarin Mono for VS开发窗体标题(Title)乱码解决方案

    利用mono for VS开发一个手机程序,结果只有窗体的标题 title部分是乱码,其他所有地方中文都显示正常,很郁闷.百度很久无果.最后发现只要在 VS菜单中 的 文件->高级保存选型中奖编 ...

  5. 去掉Dedecms幻灯片的标题文字和绿色背景

    在操作dedecms站群中的站,因为看到首页的幻灯片Flash显示标题和文字,显得有点突兀,觉得应该去除dedecms 幻灯片默认的文字标题和背景,这样会感觉舒服些,下面教大家如何在模板当中去除ded ...

  6. matplotlib命令与格式：标题(title),标注(annotate),文字说明(text)

      1.title设置图像标题 (1)title常用参数 fontsize设置字体大小,默认12,可选参数 ['xx-small', 'x-small', 'small', 'medium', 'la ...

  7. (转)asp.net动态设置标题title 关键字keywords 描述descrtptions

    方法一 if (!IsPostBack){//Page title网页标题Page.Title = “我的网站标题”;//须将网页head标签设成服务器控件模式,即<head runat=&qu ...

  8. [Android] 获取WebView的页面标题(Title)-----WebChromeClient.onReceivedTitle()方法的重写

    应用开发中需要获取WebView当前页面的标题,可能通过对WebChromeClient.onReceivedTitle()方法的重写来实现 效果图如下: 代码如下: public class Mai ...

  9. 圆角标题title

    Html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. [JS] 让人犯晕的JavaScript变量赋值

    变量赋值 本文转载自http://hellobug.github.io/blog/javascript-variable-assignment/ 开始之前先来几个例子,确保起始点是晕的状态- :P 例 ...

  2. LeetCode之字符串处理题java

    344. Reverse String Write a function that takes a string as input and returns the string reversed. E ...

  3. Unity协程使用经验

    [Unity协程使用经验] 1.协程的好处是,异步操作发起的地方和结束的地方可以统一在一个方法,这样就不用引入额外的成员变量来进行状态同步. 2.在一个协程中,StartCoroutine()和 yi ...

  4. VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发

  5. 一些好用的 Oracle 批处理和语句

    # 备份脚本 backup.bat @ECHO OFF COLOR 0A SET DaysAgo=1 SET Today=%date:~0,4%%date:~5,2%%date:~8,2% EXP u ...

  6. Ubuntu Phone开箱上手

    在昨晚举行的发布会上Canonical和硬件厂商BQ进行合作,推出了首款面向消费市场的Ubuntu手机--Aquaris E4.5,带来了与常见的iPhone和Android机完全不同的操作体验,设备 ...

  7. 三个参数，对mysql存储限制的影响

    1.max_allowed_packet  这个参数会影响单此插入或读取的包的大小,一般和blob字段共用,但要注意一点是这个参数好像是分服务端与客户端的,如果想输出大字段的内容,则在用客户端链接服务 ...

  8. code2198 数字三角形WWW

    数字三角形的新变种 设要经过的点为x y,那么dp[x][k] = -Max    k=1~x and k!=y 其他一样:dp[i][j] = max(dp[i-1][j],dp[i-1[j-1]) ...

  9. code1744 方格染色

    稍微复杂一点的划分dp 设f[i][j][k]为第i行前j个k次粉刷正确的最大值 由于每行循环使用,可以去掉第一维,但每次不要忘了清零(卡了好久) f[j][k]=max{ f[u][j-1] + m ...

  10. Django中的元类-乾颐堂

    看Django(1.6)的Form相关源代码时比较迷惑,于是节选了django.forms.forms.py中的几个代码片段来分析Django中是怎么使用元类的: 1 2 3 4 5 6 7 8 9 ...