第一种方法：如果是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. When to use HTML Helper?

    HTML Helper Single or closely related HTML elements(template) Simpler,low level logic for displaying ...

  2. html 5 新增标签及简介

    作为下一代Web技术的代表,HTML5概念在近些年尤其火热.据了解,HTML5受到垂青最直接的原因就是其跨平台性,除此之外,它不仅仅可以用于表示Web内容,还可能将Web带入一个广阔的生态平台. 下面 ...

  3. c语言: 文件io, 拷贝文件(二进制)

    #include <stdio.h> #include <stdlib.h> #define TRAN_SZIE 1024 int copy_bin(char* from, c ...

  4. Ubuntu 15.04 安装rmagick 2.15.4

    apt-get install  pkg-config, libmagick-dev,libmagickcore-dev, libmagickwand-dev, gem install rmagick

  5. JQuery标签去重与数组去重

    如图所示: 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head ...

  6. 解决gerber-Failed to Match All Shapes for PCB问题

    有效解决在Protel 99se导gerber时提示gerber-Failed to Match All Shapes for PCB出错问题如图 这种问题很好解决,打开这个窗口 操作方法如下图Emb ...

  7. filezilla Can't open data connection.

    (000003)2016/7/4 9:31:42 - (not logged in) (10.61.41.57)> Connected, sending welcome message... ( ...

  8. 地精排序(Gnome Sort) 算法

    gnome应该是最简单排序的排序算法吧!Gnome Sort,这是该算法的作者命名的,O(n*n)时间复杂度,O(1)空间复杂度,属于稳定的排序算法.算法的思想是每趟循环找到第一个逆序的元素,把它和在 ...

  9. FastStone Capture(FSCapture) 注册码 _图形图像_软件教程_脚本之家

    FastStone Capture(FSCapture) 注册码 _图形图像_软件教程_脚本之家 FastStone Capture 注册码 序列号: name/用户名:TEAM JiOO key/注 ...

  10. eclipse config 3 构造pydev

    什么是不是说生命是短暂的.我用python 准备工作 sudo apt-get install python3-dev 例如以下操作 依次点击菜单 Help->Install New Softw ...