第一种方法：如果是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. DOC下编译和运行带有包的java类文件

    前言: 带有包名的java类在DOC下编译可以成功,但是运行出错  错误: 找不到或无法加载主类 com.soanl.socket.MyServer D盘temp文件下有个Hello.java文件,包 ...

  2. Android记录4--自定义ToggleButton+用SharedPreferences保存用户配置

    Android记录4--自定义ToggleButton+用SharedPreferences保存用户配置 2013年8月14日Android记录 很多应用都会有用户设置,用户的一些偏好可以由用户来决定 ...

  3. Cstyle的札记，Freertos内核具体解释，第0篇

        Freertos是一个硬实时内核,支持众多的微处理器架构,我们能够从它的官网(www.freertos.ort)下载它的sourcecode,同一时候也能够看出它支持了几十种的微处理器架构,这 ...

  4. Android学习笔记（十四）——在执行时加入碎片（附源代码）

    在执行时加入碎片 点击获取源代码 将UI切割为多个可配置的部分是碎片的优势之中的一个,但其真正强大之处在于可在执行时动态地把它们加入到活动中. 1.使用上一篇创建的Fragments项目,在main. ...

  5. poj2486 Apple Tree【区间dp】

    转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4374766.html   ---by 墨染之樱花 [题目链接]http://poj.org/p ...

  6. c 判断水仙花数，质数（素数）

    #include<stdio.h> #include<stdbool.h> //水仙花数--各位立方和等于本身 void sXh() { int x,y,z; printf(& ...

  7. sass基本语法

    sass是一种基于ruby语言开发的CSS预处理器.它可以使用变量,嵌套,混入,继承,运算,函数等编程语言具有的特性进行CSS的开发,使得CSS的开发变得简单粗暴清晰可维护. sass有两种后缀文件格 ...

  8. C# Socket select模型

    http://www.cnblogs.com/Clingingboy/archive/2011/07/04/2097806.html http://www.cnblogs.com/RascallySn ...

  9. 面向对象程序设计-C++ Stream & Template & Exception【第十五次上课笔记】

    这是本门<面向对象程序设计>课最后一次上课,刚好上完了这本<Thinking in C++> :) 这节课首先讲了流 Stream 的概念 平时我们主要用的是(1)在屏幕上输入 ...

  10. Qt技巧：Win7下打包发布Qt程序（解释的比较清楚，把exe和dll伪装合并成一个文件）

    转自:http://www.stardrad.com/blog/qt-5%E7%A8%8B%E5%BA%8F%E5%9C%A8windows%E4%B8%8A%E7%9A%84%E5%8F%91%E5 ...