第一种方法：如果是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. php单元測试

    你是否在程序开发的过程中遇到下面的情况:当你花了非常长的时间开发一个应用后,你觉得应该是大功告成了,可惜在调试的时候,老是不断的发现bug,并且最可怕的是,这些bug是反复出现的,你可能发现这些bug ...

  2. poj2492 A Bug's Life【基础种类并查集】

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

  3. 上传列表集合wsp包

    1. 网站设置--web设计器库--解决方案--上载解决方案 2. 打开SPD,左侧的子网站--新建

  4. 基本属性 - iOS中的本地通知

    本地通知的基本使用 创建本地通知 设置属性 调度通知(添加通知到本地通知调度池) 注册用户通知权限(只需一次, 可以单独放在Appdelegate中, 或者别的地方) —> iOS8以后必须, ...

  5. Python网络编程——编写一个简单的回显客户端/服务器应用

    今天将python中socket模块的基本API学习完后,照着书上的实例编写一个套接字服务器和客户端.采用python3.5版本,在注释中会标明python2和python3的不同之处. 1.代码 ( ...

  6. [LeetCode]题解（python）：025-Reverse Nodes in k-Group

    题目来源: https://leetcode.com/problems/reverse-nodes-in-k-group/ 题意分析: 这道题目和上一题目类似,输入一个链表和一个整型k.每k个翻转一下 ...

  7. fork 函数的一点学习

    昨天某位少年问了我一个问题,#include<stdio.h> int main() { fork(); fork(); fork(); printf("hello " ...

  8. github的.md格式文件

    md文件是github改良了markdown的语法,用来显示在项目首页的文件.在官方的网址说的很清楚: GitHub uses what we're calling "GitHub Flav ...

  9. perl encode_utf8 和decode_utf8

    encode_utf8 等于 $octets = encode_utf8($string); 这个字符串 在$string 在Perl的内部格式,返回结果是作为一个顺序的字节. 因为所有的可能的字符串 ...

  10. 复习知识点：TabBarViewController（微信框架）

    TabBarViewController:标签视图控制器 在application设置 创建四个视图控制器 引入视图控制器头文件 #import "AppDelegate.h" # ...