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. Swiper thymeleaf

    html页面: <div class="swiper-container swiper_tjzt"> <div class="swiper-wrappe ...

  2. Quartz 官网翻译（转载）

    Paths中的几个重要元素 Points void CGContextMoveToPoint (    CGContextRef c,    CGFloat x,    CGFloat y ); 指定 ...

  3. SQL 数据库 学习 006 如何设置一个用户名和密码

    我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Express 先启动 SQL Server 2014 Management Studi ...

  4. Selenium自动化测试WebDriver下载

    1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是原版的就不得而知了. http://www.slimjet.com/ch ...

  5. VC6.0 中 添加/取消 块注释的Macro代码

    SAMPLE.DSM是微软提供的样例,使用的是vb语言.其中的 CommentOut 函数,是支持块注释的,可是这种/**/的注释方式,有时候用起来不是很方便,因为两个/会因为一个/而终止.对于大块代 ...

  6. win7设置开机启动virtualBOX虚拟机

    如果常用VirtualBox虚拟机系统的话,设置随开机启动也是很方便的.不需要打开VirtualBox窗口,直接启动VirtualBox虚拟机系统就可以了. 设置开机自启动VirtualBox虚拟机系 ...

  7. HDU 1104 Remainder （BFS求最小步数 打印路径）

    题目链接 题意 : 给你N,K,M,N可以+,- ,*,% M,然后变为新的N,问你最少几次操作能使(原来的N+1)%K与(新的N)%k相等.并输出相应的操作. 思路 : 首先要注意题中给的%,是要将 ...

  8. mybatis insert 自动生成key

    <selectKey keyProperty="id" resultType="java.lang.String" order="BEFORE& ...

  9. 开源SLAM

    GitHub 上优秀的开源SLAM repo (更新中):https://www.jianshu.com/p/464ca0d0c254 当前的开源SLAM方案:https://www.cnblogs. ...

  10. mybatis_入门程序

    Mybatis入门 (一).程序环境 1.jar包 2.classpath目录下建立SqlMapConfig.xml. mybatis的配置文件.全部设置有如下 同时,数据库的参数可以用propert ...