CSS3中的border-radius支持IE9+,chrome,firefox 2、3+,以及safari3.2+浏览器。

border-radius可直接使用，无需加前缀(注意：firefox13取消了-moz前缀，即由原来的-moz-border-radius变为border-radius，加上前缀会造成无法显示圆角，chrome加前缀和不加前缀都可以)border-radius后面直接加值即可，该值来确定圆角的大小，如：border-radius:5px;

1、有边框：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #div1{

            padding: 10px;

            width:300px;

            height:100px;

            border:3px solid #cc0000;

            border-radius:10px;

        }

    </style>

</head>

<body>

<div id="div1"></div>

</body>

</html>

 效果：

 

2、无边框

在css中添加颜色代码即可

background: #cc0000;

效果

 

无边框完整代码：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #div2{

            padding: 10px;

            width:300px;

            height:100px;

            border:3px solid #cc0000;

            border-radius:10px;

            background: #cc0000;

        }

    </style>

</head>

<body>

<div id="div2"></div>

</body>

</html>

 3、四角不同大小

四角不同大小特别简单，使用border-radius:5px 10px 15px 20px;整合即可。

如下效果：

 

完整代码是：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #div3{

            padding: 10px;

            width:300px;

            height:100px;

            border:3px solid #cc0000;

            border-radius:5px 10px 15px 20px;

            background: #cc0000;

        }

    </style>

</head>

<body>

<div id="div3"></div>

</body>

</html>

CSS3圆角（border-radius）的更多相关文章

  1. 兼容所有浏览器的CSS3圆角

    兼容所有浏览器的CSS3圆角      解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...

  2. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS3圆角

    使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...

  4. [HTML] CSS3 圆角

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你 ...

  5. 转-CSS3 圆角（border-radius）

    CSS3 圆角(border-radius)   前缀 例1 例2:无边框 书写顺序 其它 支持性 值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -w ...

  6. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  7. CSS3圆角气泡框，评论对话框

    <title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...

  8. CSS3圆角详解

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  9. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  10. IE支持CSS3圆角

    在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器. 具体CSS代码: .yuan { border: 2px solid #C0C0C0; -moz-border-radius: 10p ...

随机推荐

  1. [置顶] 深入理解android之IPC机制与Binder框架

    [android之IPC机制与Binder框架] [Binder框架.Parcel.Proxy-Stub以及AIDL] Abstract [每个平台都会有自己一套跨进程的IPC机制,让不同进程里的两个 ...

  2. Ajax页面跳转

    <script type="text/javascript" >    $(document).ready(function () {            $(&qu ...

  3. Linux中查看系统资源占用情况的命令【转载】

      用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O 负载 ...

  4. SpringMVC项目接入Springfox实战遇到的问题集合

    为了方便的管理项目中API接口,目前总是会写好接口后,然后又要去维护一个文档,这对于开发者来说太心累了, 在网上找了好多关于API接口管理和生成文档的资料,一次偶然跟51的大神交流发现了Swagger ...

  5. 关于ABAP事件的一张图

    事件: 这里有几组事件关键字 ,这些事件关键字在特定环境下控制ABAP/4 程序流. 逻辑数据库 是典型报表程序的外部流控制的中心点.如果将逻辑数据库链接到报表 程序,将导致显示选择 屏幕,并决定系统 ...

  6. Spark 1.0.0版本号公布

    前言 今天Spark最终跨出了里程碑的一步,1.0.0版本号的公布标志着Spark已经进入1.0时代.1.0.0版本号不仅增加了非常多新特性,而且提供了更好的API支持.Spark SQL作为一个新的 ...

  7. 2014年到期的myeclipse5.5.1注冊码

    假设点击Myeclipse的载入项目到server的图标没有反应,这就是MyEclipse过期了,下面是还能用一年的注冊码: subscriber: axin  Serial:nLR8ZC-85557 ...

  8. POJ 3734

    题目的大意: 给定待粉刷的n个墙砖(排成一行),每一个墙砖能够粉刷的颜色种类为:红.蓝.绿.黄, 问粉刷完成后,红色墙砖和蓝色墙砖都是偶数的粉刷方式有多少种(结果对10007取余). 解题思路: 思路 ...

  9. Android框架之网络开发框架Volley

    1. Volley简单介绍 我们平时在开发Android应用的时候不可避免地都须要用到网络技术.而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进 ...

  10. 【HDU 2014 Multi-University Training Contest 1 1002】/【HDU 4862】Jump

    多校训练就这么华丽丽的到了 ,于是乎各种华丽丽的被虐也開始了. 这是多校的1002; 最小费用最大流. 题目大意: 有n*m个方格,每一个方格都一个的十进制一位的数.你能够操作K次. 对于每一次操作, ...