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. golang的array/slice

    相同点 由相同类型的元素组合构成 元素有序排列,0为第一个元素下标 基本使用方法相同 区别 array声明时需要指定容量大小,而且无法修改 slice可通过append增加元素,当容量不够时,会自动扩 ...

  2. js引用类型赋值，深拷贝与浅拷贝

    JS中引用类型使用等号“=” 赋值,相当于把原来对象的地址拷贝一份给新的对象,这样原来旧的对象与新的对象就指向同一个地址,改变其中一个对象就会影响另外那个对象,也就是所谓的浅拷贝.例如: var ar ...

  3. mysql的my.ini配置文件

    第一步,我们找到mysql安装文件下面的my.ini文件,打开可以看到第一句: # MySQL Server Instance Configuration File Mysql服务实例配置文件 好,咱 ...

  4. 阻塞和唤醒线程——LockSupport功能简介及原理浅析

    目录 1.LockSupport功能简介 1.1 使用wait,notify阻塞唤醒线程 1.2 使用LockSupport阻塞唤醒线程 2. LockSupport的其他特色 2.1 可以先唤醒线程 ...

  5. VUE+WebPack游戏设计：欲望都市城市图层的设计

  6. ubuntu 重启显卡报错 nvidia

    1.我装玩显卡以后重启报错了 解决了5个小时才解决,先贴个当时报错的图 第一个图是没有加nomodeset 出先的 当你出现第二个图片的时候证明你离成功不远了 从头开始: 1.开机,出现 ubuntu ...

  7. .NET 使用HttpWebRequest 伪造Request.UrlReferrer

    在网上找了许久关于伪造UrlReferrer地址资料,也许是搜索的关键词不对吧,还是内容涉及到了什么敏感的东西,愣是没找到,换成自定义UrlReferrer也找不到.经过仔细研究,原来在.NET中要自 ...

  8. Java研发书单

    Java研发书单 计算机基础:<深入理解计算机系统><计算机网络> 网络方面:<TCP/IP协议卷一><unix网络编程卷一>(部分章节,JAVA主要是 ...

  9. 掌握所有IO口的外部中断

    外部中断配置流程 1.初始化IO口工作在普通IO.上拉输入状态. 2.首先开IO口组中断(P0IE=1.P1IE=1.P2IE=1): 3.开组内对应的具体某IO口中断(P0IEN.P1IEN.P2I ...

  10. AlwaysOn的数据同步原理

    摘抄自<SQL Server 2012实施与管理实战指南> 镜像的工作原理: 那么主体数据库和镜像数据库是如何同步数据的呢?SQL数据库中任何的数据变化都会先记录到事务日志中,然后才会真正 ...