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>

    <style type="text/css">

    * {margin: 0;padding: 0;}

    body {max-width: 640px;margin: 50px auto;}

    .public_title { margin: 5px 2px;overflow: hidden; text-align: center; font-size: 16px;}

    .public_title .p_t_bottom,

    .public_title .p_t_top {height: 5px;margin: 0 5px;background: #ff5b80;}

    .public_title .p_t_top {border-radius: 5px 5px 0 0;}

    .public_title .p_t_body {height: 22px;line-height: 22px;background: #ff5b80;position: relative;font-size: 18px;border-radius: 5px;color: #fff;}

    .public_title .p_t_bottom {border-radius: 0 0 5px 5px;}

    .border_wrapper { margin: 30px 2px;overflow: hidden; text-align: center; font-size: 16px;}

    .border_wrapper .b_w_bottom,

    .border_wrapper .b_w_top {height: 5px;margin: 0 5px;border:1px solid #ff5b80;}

    .border_wrapper .b_w_top {border-radius: 5px 5px 0 0; border-bottom: 0;}

    .border_wrapper .b_w_body {height: 22px;line-height: 22px; border:1px solid #ff5b80;position: relative;font-size: 18px;border-radius: 5px;color: #333; border-top:0;border-bottom: 0}

    .border_wrapper .b_w_bottom {border-radius: 0 0 5px 5px;border-top:0;}

    </style>

</head>

<body>

    <div class="public_title">

        <div class="p_t_top"></div>

        <div class="p_t_body"><span>测试小姐的命格</span></div>

        <div class="p_t_bottom"></div>

    </div>

    <div class="border_wrapper">

        <div class="b_w_top"></div>

        <div class="b_w_body"><span>测试先生的命格</span></div>

        <div class="b_w_bottom"></div>

    </div>

</body>

</html>

效果图：

上面效果圆角“测试先生的命格”这个title圆角会模糊，b_w_body的上边框和下边框不用为0；只要把上下圆角的div，相对定位和加背景颜色就可以了，b_w_body也要加背景颜色；如下图所示：

圆角不模糊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>

    <style type="text/css">

    * {margin: 0;padding: 0;}

    body {max-width: 640px;margin: 50px auto;}

    .public_title { margin: 5px 2px;overflow: hidden; text-align: center; font-size: 16px;}

    .public_title .p_t_bottom,

    .public_title .p_t_top {height: 5px;margin: 0 5px;background: #ff5b80;}

    .public_title .p_t_top {border-radius: 5px 5px 0 0;}

    .public_title .p_t_body {height: 22px;line-height: 22px;background: #ff5b80;position: relative;font-size: 18px;border-radius: 5px;color: #fff;}

    .public_title .p_t_bottom {border-radius: 0 0 5px 5px;}

    .border_wrapper { margin: 30px 2px;overflow: hidden; text-align: center; font-size: 16px;}

    .border_wrapper .b_w_bottom,

    .border_wrapper .b_w_top {height: 5px;margin: 0 5px;border:1px solid #ff5b80; position: relative;z-index: 2;background: #fff;}

    .border_wrapper .b_w_top {border-radius: 5px 5px 0 0; border-bottom: 0; top:1px;}

    .border_wrapper .b_w_body {height: 22px;line-height: 22px; border:1px solid #ff5b80;font-size: 18px;border-radius: 5px;color: #333;background: #fff; }

    .border_wrapper .b_w_bottom {border-radius: 0 0 5px 5px;border-top:0; bottom:1px;}

    </style>

</head>

<body>

    <div class="public_title">

        <div class="p_t_top"></div>

        <div class="p_t_body"><span>测试小姐的命格</span></div>

        <div class="p_t_bottom"></div>

    </div>

    <div class="border_wrapper">

        <div class="b_w_top"></div>

        <div class="b_w_body"><span>测试先生的命格</span></div>

        <div class="b_w_bottom"></div>

    </div>

</body>

</html>

最终效果图：

 第二种圆角title：

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> </title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    body{max-width: 640px; margin: 0 auto;}

    .public_border_title{ margin: 10px; text-align: center; color: #fff; }

    .b_t_down, .b_t_up {height: 10px;border: 1px solid #bbbab4; margin: 0 3px;position: relative;z-index: 2;background: #fffdf1;}

    .b_t_down span, .b_t_up span { display: block; height: 7px;border: 1px solid #bbbab4; margin:0 3px;background: #d23037;}

    .b_t_up {border-bottom: none;border-radius: 5px 5px 0 0;top: 1px;}

    .b_t_up span{border-bottom: none;border-radius: 5px 5px 0 0; margin-top: 3px;}

    .b_t_down {border-top: none;border-radius:  0 0 5px 5px;bottom: 1px;}

    .b_t_down span{border-top: none;border-radius:  0 0 5px 5px;}

    .b_t_body {border: 1px solid #bbbab4;background: #fffdf1;border-radius: 5px;height: 26px; line-height: 26px;}

    .b_t_body span{ display: block; border: 1px solid #bbbab4;background: #d23037;border-radius: 5px; margin:0 3px; height: 25px; line-height: 25px;}

    .title{ height: 32px; line-height: 32px; text-align: center; background-color: #f6a965; position: relative; color: #fff; font-size: 18px; margin: 20px 10px; }

    .title span{ display: inline-block; position: absolute; top:0;width: 10px;height: 10px;background-color: #fff;-webkit-border-radius: 0 0 20px 0;}

    .title .left{left: 0;   }

    .title .right{right: 0;  -moz-transform:scaleX(-1);

                -webkit-transform:scaleX(-1);

                -o-transform:scaleX(-1);

                transform:scaleX(-1);

                filter:FlipH;}

    </style>

</head>

<body>

    <div class="public_border_title">

        <div class="b_t_up"><span></span></div>

        <div class="b_t_body"><span>测算后您将知道以下信息</span></div>

        <div class="b_t_down"><span></span></div>

    </div>

    <div class="title">

        <span class="left"></span>

        八字精批

        <span class="right"></span>

    </div>

</body>

</html>

效果图：

圆角标题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. (转)asp.net动态设置标题title 关键字keywords 描述descrtptions

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

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

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

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

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

  8. EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

    示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echa ...

  9. 怎样查看或修改网页的标题title

    网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...

随机推荐

  1. objective-C 的内存管理之-实例分析

    objective-C 的内存管理之-实例分析 注:这是<Objective-C基础教程>一书上的实例,但是原书限于篇幅,分析得比较简单,初次阅读看得比较费劲,这里展开详细讨论一下. 场景 ...

  2. Django实现支付宝付款和微信支付

    支付宝支付和微信支付是当今互联网产品常用的功能,我使用Django Rest Framework实现了网页上支付宝支付和微信支付的一个通用服务,提供rpc接口给其他服务,包括获取支付宝支付页面url的 ...

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

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

  4. BBS项目(2)

    我们实现登录功能的随机验证码的产生 views.py def get_random_color(): return ( # 创建三个0-255的随机数 random.randint(0, 255), ...

  5. Jrebel 独立部署tomcat 远程同步项目

    一直在用 jrebel 感觉热部署的 功能,修改xml配置文件等,省去了很多的重新启动的时间. 由于偶然间发现 jrebel 还有remote 路由功能.这样,在服务器端用jrebel部署的项目和本地 ...

  6. C primer 编程练习 (不断更新)

    目前在看<C Primer>,以后会经常在这篇博客里更新课后的编程练习题 第二章:编程练习 2.1 #include <stdio.h> int main(void) { pr ...

  7. eclipse插件svn图标详细含义

    链接:http://pan.baidu.com/s/1qYSFfTq 密码:ez8p

  8. Hadoop Shell

    1.常用的一些Shell 再好的博客,都不如官方文档好用: http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html

  9. Swift & Objc 在同一个项目中的使用

    在WWDC大会中发布了Swift让人眼前一亮.终于加了很多的现代编程语言该有的东西.很早年以前玩C#3.0+的时候这些差不多类似的 已经用的烂熟的东西终于一点一点的在看Swift Programmin ...

  10. 编写高质量代码改善C#程序的157个建议——建议128：考虑让派生类的名字以基类名字作为后缀

    建议128:考虑让派生类的名字以基类名字作为后缀 派生类的名字可以考虑以基类名字作为后缀.这带来的好处是,从类型的名字上我们就知道它包含在哪一个继承体系中. Exception及其子类就是这样一个典型 ...