第一种更好用：

主要是样式：

.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. java 蓝桥杯算法提高 出现次数最多的整数

    思路:其实这道题不是太难,但是这个题太坑了,提交了好多次都不是100,后来才知道,一定一定要在输入数组数据之前先判断一下输进去的n的范围,一定一定要注意,否则就是跟我下面的图片一样的效果了,泪奔~ 问 ...

  2. 启动和关闭MySQL服务

    停止mysql服务,说来简单,但不知道的话,还真是挠头.在这和mysql入门的同学们共享:)  正确方法是,进入mysql的bin目录下,然后执行./mysqladmin -uroot -p shut ...

  3. 如何用shell脚本执行或关闭jar包服务？

    现在springboot很流行,但是大家都知道springboot是以jar包的方式进行打包的,那样就少不了开启或关闭服务的操作了,但是命令方式未免过于繁琐. 下面记录shell脚本的方式启动或关闭服 ...

  4. 2015年2月编程语言排行榜：JavaScript排名达到历史最高

    JavaScript在赢得2014年最后一个月的TIOBE编程语言奖后,并且还在不断走强.在二月份JavaScript就超过了PHP,并 且达到它有史以来最高的位置,排行到TOP 6.另一方面,Obj ...

  5. WebSocket 教程（转载）

    WebSocket 教程   作者: 阮一峰 日期: 2017年5月15日 WebSocket 是一种网络通信协议,很多高级功能都需要它. 本文介绍 WebSocket 协议的使用方法. 一.为什么需 ...

  6. linux sed命令详解-乾颐堂CCIE

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...

  7. ubuntu安装meshlab

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

  8. 使用Selenium&PhantomJS的方式爬取代理

    前面已经爬取了代理,今天我们使用Selenium&PhantomJS的方式爬取快代理 :快代理 - 高速http代理ip每天更新. 首先分析一下快代理,如下 使用谷歌浏览器,检查,发现每个代理 ...

  9. 做个简单的Redis监控(源码分享)[转载]

    Redis监控 Redis 是目前应用广泛的NoSQL,我做的项目中大部分都是与Redis打交道,发现身边的朋友也更多人在用,相对于memcached 来说,它的优势也确实是可圈可点.在随着业务,数据 ...

  10. 自定义DropDownMenu菜单

    在JayFang1993 / DropDownMenu的基础上进行修改,最后的到自己想要的效果 本来的效果: 而我最后实现的效果是: 我们先来分析一下DropDownMenu的源代码 需要改动的地方 ...