第一种更好用：

主要是样式：

.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. failed to open stream: No such file or directory 报错解决方法

    1.首先检查是否是文件名错误(比如有空格):是否因为路径不完整(比如缺少http://,或者缺少文件扩展名.doc等): 2.若是在本地中文名文件打开报错,我就是因为编码不一致导致: Windows中 ...

  2. SPI子系统分析之三:驱动模块

    内核版本:3.9.5 SPI核心层(平台无关) SPI子系统初始化的第一步就是将SPI总线注册进内核,并且在/sys下创建一个spi_master的类,以后注册的从设备都将挂接在该总线下. 下列函数位 ...

  3. Jenkins 更新最新版本

    一般情况下,war的安装路径在/usr/share/jenkins目录下. 不过也有部分人不喜欢安装在这里,可以通过系统管理(System management)--> 系统信息(System ...

  4. python 字符编码处理问题总结

    Python中常常遇到这种字符编码问题,尤其在处理网页源代码时(特别是爬虫中): UnicodeDecodeError: ‘XXX' codec can't decode bytes in posit ...

  5. c++ 备忘录模式（memento）

    备忘录模式:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态[DP].举个简单的例子,我们玩游戏时都会保存进度,所保存的进度以文件的 ...

  6. 开启Windows8里面的Hyper-V虚拟机功能

    首先了解下什么是Hyper-V?也就是虚拟化技术,允许终端用户在同一台机器上运行多个操作系统,支持32位和64位系统,可以直接在Windows 8上创建自己的虚拟机.开启Hyper-V虚拟机需要更多的 ...

  7. SqlServer——系统函数

    1) CASE CASE有两种使用形式:一种是简单的CASE函数,另一种是搜索型的CASE函数. [1]简单的 CASE 函数 Format: CASE input_expression WHEN w ...

  8. 白盒测试实践--Day5

    累计完成任务情况: 阶段内容 参与人 完成个人情况说明并提交作业 全体 汇总作业,查漏补缺,完成代码测试总结 小靳.小龙 完成测试小结 小黄.小尹 完成静态代码检查结果报告 小靳 完成JUnit脚本编 ...

  9. ServiceStack.Redis.RedisNativeClient的方法“get_Db”没有实现。

    项目中用到redis,用nuget导入,但是运行时遇到问题 Exception: “Com.JinYiWei.Cache.RedisHelper”的类型初始值设定项引发异常.System.TypeIn ...

  10. eclipse 按装lombok与注解说明

    原文:http://www.cnblogs.com/ywqbj/p/5711691.html 一.安装lombok 1.下载   lombok-1.16.16.jar 包 我的下载完后放到:/root ...