第一种方法：如果是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. JavaScript 覆盖document.createElement 方法 解决window.close在火狐下不兼容问题）

    近期项目遇到了问题,有个asp.net web程序仅仅能在IE7 执行.如今xp都淘汰了,大家都用IE8-IE11,因此这个web app也须要升级 适应全部IE版本号.照成IE版本号不兼容的问题主要 ...

  2. MVC 常用方法

    1. 后台 action方法里添加错误消息到字典中(key,value) ModelState.AddModelError("Error", "参数传输有误,请重新尝试! ...

  3. config -导航

    在config进行中配置 1在config中添加SITmap  <siteMap enabled="true" defaultProvider="UserSiteM ...

  4. 通过SqlHelper实现登录

    1.建立解决方案:. 首先创建windows窗体应用程序,然后拖出登录界面 2. 写配置文件App.config:     <configuration>         <conn ...

  5. [译]Stairway to Integration Services Level 15 – SSIS 参数回顾

    介绍 在本文中我们会研究SSIS变量姐妹: SSIS 变量. 我们会演示参数配置,通过包参数管理动态属性值,然后会演示SSIS包执行的时候参数怎么被配置的. SSIS Parameters 101 S ...

  6. HDU 4548 美素数（打表）

    HDU  4548  美素数(打表)解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88159#problem/H 题目 ...

  7. [LeetCode]题解（python）：018-4Sum

    题目来源: https://leetcode.com/problems/4sum/ 题意分析: 这道题目和3Sum的题目类似,找出所有的4个数,使得这4个数等于target. 题目思路: 这道题做法和 ...

  8. 1104--DNA排序

    问题描述: 逆序数可以用来描述一个序列混乱程度的量.例如,“DAABEC”的逆序数为5,其中D大于它右边的4个数·,E大于它右边的1的个数,4+1=5,又如,“ZWQM”的逆序数为3+2+1+0=6. ...

  9. Redhat 5.8系统安装R语言作Arima模型预测

    请见Github博客:http://wuxichen.github.io/Myblog/timeseries/2014/09/02/RJavaonLinux.html

  10. poj 1035 Spell checker(hash)

    题目链接:http://poj.org/problem?id=1035 思路分析: 1.使用哈希表存储字典 2.对待查找的word在字典中查找,查找成功输出查找成功信息 3.若查找不成功,对word增 ...