第一种方法：如果是CSS2.2的话，可以简单写一个制作圆角矩形，分上中下裁成三张图

 <title>CSS3实现圆角</title>

  <style type="text/css">

  #box

 {

  　　width:200px;

  　　height:30px;

  　　background:url("../images/bt_bottom.jpg") no-repeat left bottom; 

 } 

 #box h1

 {

 　　width:200px; 

 　　height:20px; 

 　　text-indent:-9999px; 

 　　background:url("../images/bt_top.jpg") no-repeat left top; 

 }

  /*下面这个是中间平铺的图，如果是纯色的话，可以直接写颜色值，也可以直接在上述box的背景上写上背景颜色*/ 

 #box div#content

 { 

 width:200px;

  height:200px; 

 background:url("../images/bt_bg.jpg") repeat-y;

  }

 </style> 

 </head> 

 <body> 

 <div id="box"> 

 <h1>标题</h1> 

 <div id="content"></div> 

 </div> 

 </body>

  </html>

第二种方法：如果是使用CSS实现圆角的话，那么目前最简单的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳，目前能支持CSS3的浏览器有IE9及以上版本，google chrome10以上版本，firefox4及以上版本。否则的话，只能使用图片来进行实现了，当然也可以使用css2，但是那个太过于麻烦。

下面我给你一个例子，你可以在以上我提到的相应浏览器中进行浏览，那样效果会更好！

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>CSS3实现圆角</title>

 <style type="text/css">

 .box

 {

 　　width:200px;

 　　height:200px;

 　　background:#09F;

 　　-moz-border-radius:8px;/*8px是圆角的角度，值越大则圆角效果越明显，如果修改此项，请修改以下两项的值，使之相同*/

 　　-webkit-border-radius:8px;

 　　border-radius: 8px;

 }

 }

 </style>

 </head>

 <body>

 <div class="box"></div>

 </body>

 </html>

请将以上代码复制粘贴后，保存为html文档即可，然后利用目前最新版的浏览器进行浏览即可看到如下效果：

无图！！！！

第3种方法：直接用 border-radius

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#sub1

{

    width:200px;

    height:200px;

    border-radius:15px;

    background-color:#093

}

</style>

</head>

<body>

<div id="parent">

    <div id="sub1"></div>

</div>

</body>

边框圆角化方式（原文链接http://www.cnblogs.com/SJP666/p/4678730.html）的更多相关文章

  1. Linux Android 多点触摸协议 原文出自【比特网】，转载请保留原文链接：http://soft.chinabyte.com/os/71/12306571.shtml

    为了使用功能强大的多点触控设备,就需要一种方案去上报用户层所需的详细的手指触摸数据.这个文档所描述的多点触控协议可以让内核驱动程序向用户层上报任意多指的数据信息. 使用说明 单点触摸信息是以ABS承载 ...

  2. 鱼骨时间轴案例（转自CSDN,原文链接附于文中）

    $.fn.fishBone = function(data) { var colors = ['#F89782','#1A84CE']; /**入口*/ //1.创建dom $(this).child ...

  3. jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式（转自CSDN,原文链接附于文中）

    原文链接:http://www.jqueryfuns.com/resource/2173 $.fn.fishBone = function(data) { var colors = ['#F89782 ...

  4. ZT 感触的屌丝职场记 投递人 itwriter 发布于 2013-05-27 09:21 评论(18) 有3402人阅读 原文链接 [收藏] « » 　　作者@幻想哥呀幻想哥 　　有一位屌丝男，从小抱着报效祖国的理想上了大学，毕业后干了 IT 行业，高中那时候看文汇报说，搞 IT 的在上

    屌丝职场记 投递人 itwriter 发布于 2013-05-27 09:21 评论(18) 有3402人阅读  原文链接  [收藏]  « » 作者@幻想哥呀幻想哥 有一位屌丝男,从小抱着报效祖国的 ...

  5. JS实现复制网页内容自动加入版权内容代码和原文链接

    JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...

  6. 用Nodejs连接MySQL（原文链接）

    原文链接:http://blog.fens.me/nodejs-mysql-intro/

  7. Sublime Text快捷键去除空白行 - 转载请保留原文链接：https://www.noniu.com/qianduan/sublime-text-kongbaihang.html

    如果使用notepad++或者Dreamweaver的朋友,应该知道有个快捷键或者功能按钮,可以实现删除文档空白行的功能.虽然空白行不会影响程序运行,但是会占一定的空间,对于有处女座特质的程序员来说, ...

  8. 自定义View实现圆角化

    目的: 1.实现自定义ReleativeLayout圆角化 实现: 1.在res目录中新建attrs.xml文件,自定义属性如下. <?xml version="1.0" e ...

  9. Socket的用法——NIO包下SocketChannel的用法 ———————————————— 版权声明：本文为CSDN博主「茶_小哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/ycgslh/article/details/79604074

    服务端代码实现如下,其中包括一个静态内部类Handler来作为处理器,处理不同的操作.注意在遍历选择键集合时,没处理完一个操作,要将该请求在集合中移除./*模拟服务端-nio-Socket实现*/pu ...

随机推荐

  1. android 在新建短信时，加入名称为","(英文逗号)的联系人时，应用崩溃的修改

    请修改文件 /alps/frameworks/ex/chips/src/com/android/ex/chips/RecipientAlternatesAdapter.java private sta ...

  2. projecteuler----&gt;problem=8----Largest product in a series

    title: The four adjacent digits in the 1000-digit number that have the greatest product are 9 9 8 9 ...

  3. WINCE平台下C#应用程序中使用看门狗

    看门狗定时器(WDT,Watch Dog Timer)是单片机的一个组成部分,它实际上是一个计数器,一般给看门狗一个大数,程序开始运行后看门狗开始倒计数.如果程序运行正常,过一段时间CPU应发出指令让 ...

  4. Backbone入门教程

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. HTML5.1就要来了

    原文来自https://www.w3.org/blog/2016/04/working-on-html5-1/ 总结一下几个点: 1.六个月内,也就是到九月份的时候,HTML5.1会和大家见面. 2. ...

  6. nodejs hello world （调用文件执行没反应）

    今天学习了node.js ,来看一下hello world 的写法. 1. 首先安装node.js的驱动文件.http://nodejs.org/ 2. a:安装好node之后,在CMD窗口输入nod ...

  7. 五毛的cocos2d-x学习笔记02-基本项目源码分析

    class AppDelegate : private cocos2d::Application private表示私有继承,cocs2d是一个命名空间.私有继承下,Application类中的pri ...

  8. CentOS-6.3安装配置JDK-7或 JDK-6

    链接地址:http://blog.csdn.net/shuixin536/article/details/8954000 http://www.cnblogs.com/zhoulf/archive/2 ...

  9. python网络编程——将IPv4地址转换成不同的格式

    1.将IPv4地址转换为32位二进制格式,用做底层网络函数. import socket from binascii import hexlify def convert_IPv4_address() ...

  10. C++ Input & Output

    1.C++ I/O各类之间的继承关系图 参考网址: http://www.cplusplus.com/reference/iolibrary/ Note: 在程序中包含iostream文件将自动创建8 ...