第一种更好用：

主要是样式：

.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. 如何将Excel日期快速转化为文本格式？

    Excel表中日期格式其实是数值,有时候需要原样转成文本,有时候也要将文本转成日期. 我发现了一个方法,估计是最快的了.不需要用那一堆year() month()之类的函数. 快速将日期格式转化为文本 ...

  2. Bug of VS2015+WDK

    1>  Signability test failed.1>  1>  Errors:1>  22.9.7: DriverVer set to incorrect date ( ...

  3. Presto资源组配置

    { "rootGroups": [ { "name": "global", "softMemoryLimit": &qu ...

  4. 蓝桥杯算法训练 java算法 表达式求值

    问题描述 输入一个只包含加减乖除和括号的合法表达式,求表达式的值.其中除表示整除. 输入格式 输入一行,包含一个表达式. 输出格式 输出这个表达式的值. 样例输入 1-2+3*(4-5) 样例输出 - ...

  5. CSS隐藏元素 display visibility opacity的区别

    { display: none; /* 不占据空间,无法点击 */ }  { visibility: hidden; /* 占据空间,无法点击 */ }  { position: absolute; ...

  6. XPath在python中的高级应用

    XPath在python的爬虫学习中,起着举足轻重的地位,对比正则表达式 re两者可以完成同样的工作,实现的功能也差不多,但XPath明显比re具有优势,在网页分析上使re退居二线. XPath介绍: ...

  7. [C++] Variable/Hex conversion

    程序编译链接原理预处理:.c -> .i gcc -E hello.c -o hello.i 编译:.i / .c -> .sgcc -S hello.i -o hello.s 汇编:.s ...

  8. [转]Python-__builtin__与__builtins__的区别与关系(超详细,经典)

    在学习Python时,很多人会问到__builtin__.__builtins__和builtins之间有什么关系.百度或Google一下,有很 多答案,但是这些答案要么不准确,要么只说了一点点,并不 ...

  9. Spring MVC 配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  10. IIS请求筛选模块被配置为拒绝包含双重转义序列的请求404.11

    文件目录有这样一个包含了加号的文件:2015年日历表(A4+版).pdf 现在要求下载此文件,考虑这样一个url /UploadFile/2015年日历表(A4+版).pdf 如果在浏览器访问这个ur ...