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. spring注解扫描组件注册

    最近对单点系统进行微服务拆分,被各个springboot的组件注册搞得云里雾里的.(有的是通过springboot的自动配置进IOC容器的,有的是自己添加构造方法添加进IOC容器.)决定抽时间将spr ...

  2. Spket,eclipse下安装Spket插件,格式化js

    点击菜单 Help => Install New SoftWare => add 如图 name框输入:Skept Location框输入:http://www.agpad.com/upd ...

  3. CS4.1 RPM打包函数分析

    shell举例说明:脚本名称叫test.sh 入参三个: 1 2 3运行test.sh 1 2 3后$*为"1 2 3"(一起被引号包住)$@为"1" &quo ...

  4. Python操作Excel删除一个Sheet

    在使用Python进行数据分析处理,操作Excel,有时需要删除某个Excel里的某个sheet,这里记录一个我测试成功的一个办法 软件环境: 1.OS:Win 10 64位 2.Python 3.7 ...

  5. sqlserver服务器硬件性能瓶颈分析

    硬件性能瓶颈 内存 内存对SQL Server性能的影响胜过任何其他硬件.因此,对SQL Server系统的内存使用情况进行定期监视以确保内存的可用百分比高于20%是很有必要的.如果用户遭遇性能问题, ...

  6. Nginx 事件基本处理流程分析

    说明:本文章重点关注事件处理模型.有兴趣的同学可以去http://tengine.taobao.org/book/查找更多资料.Tengine应该是淘宝基于Nginx自己做的修改.这个地址的文档还在不 ...

  7. [C++] Pure Virtual Function and Abstract Class

    Pure Virtual Function Abstract Class

  8. Django调试工具django-debug-toolbar安装使用教程

    在网站开发中难免要调试页面,而使用django开发站点时,可以使用django-debug-toolbar来进行调试,安装这个插件很有用,我一开始是为了查看某个页面中所有的context变量值,当然你 ...

  9. spring 获取 WebApplicationContext的几种方法

    spring 获取 WebApplicationContext的几种方法 使用ContextLoader WebApplicationContext webApplicationContext = C ...

  10. C# chart.DataManipulator.FinancialFormula（）公式的使用 线性回归预测方法

    最近翻阅资料,找到 chart.DataManipulator.FinancialFormula()公式的使用,打开另一扇未曾了解的窗,供大家分享一下. 一 DataManipulator类 运行时, ...