第一种更好用：

主要是样式：

.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. 关于junit包导入不了但是maven本地库中却存在的问题

    导入项目的时候发现junit的类使用不了,于是就去看看包导入了没有 发现包是灰色的,于是猜想可能是maven本地库中包没下载过来 查询了本地库发现包是存在的,这就奇怪的,经过网上查询之后得到解决方案 ...

  2. (转) Linux下配置nfs并远程挂载

    nfs是网络文件系统,允许一个节点通过网络访问远程计算机的文件系统,远程文件系统可以被直接挂载到本地,文件操作和本地没有区别,如果是局域网的nfs那么io的性能也可以保证,下面就以CentOS 7.x ...

  3. C#根据url生成唯一的key

    根据url生成唯一的idkey,记录并分享: public class UrlToUniqueKey { ); , ] { { 0L, 0L }, { -4611686018427387904L, - ...

  4. iOS开发时间控件怎么强制24小时制(小技巧)

    1)当你的format格式是 NSDateFormatter* dateFormatter = [[[NSDateFormatter alloc] init] autorelease];[dateFo ...

  5. 由浅到深理解ROS（5）- launch启动文件的理解与编写

    ROS提供了一个同时启动节点管理器(master)和多个节点的途径,即使用启动文件(launch file).事实上,在ROS功能包中,启动文件的使用是非常普遍的.任何包含两个或两个以上节点的系统都可 ...

  6. 魔法变量*args 和 **kwargs

    其实并不是必须写成*args 和**kwargs. 只有变量前面的 *(星号)才是必须的. 你也可以写成*var 和**vars. 而写成*args 和**kwargs只是一个通俗的命名约定. *ar ...

  7. tp5 whereOr

    题目:查询grade=1 or class=2 or sex=3的学生 $condition[; $condition[; $condition[; $list =Db::name($this-> ...

  8. ubuntu安装meshlab

    ubuntu安装meshlab https://github.com/nine7nine/meshlab.git

  9. .NET开源MSSQL、Redis监控产品Opserver之Redis配置

    安全与基础配置地址:http://www.cnblogs.com/xiaopotian/p/6898310.html edis监控数据实例的加载可以查看Opserver.Core项目data/Redi ...

  10. jenkins持续集成之Global Tool Configuration的配置

    Global Tool Configuration的配置过程: 1.点击系统管理2.点击 Global Tool Configuration3.必须配置: jdk git ant maven 1.点击 ...