CSS3圆角border-radius也是比较常用的，有了圆角，可以少很多图片了:)

语法：

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

说明：length不可为负值。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。

一个简单的例子：

<!DOCTYPE html>

<html>

<head>

<style>

#radius

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

height:200px;

border-radius:25px;

-moz-border-radius:25px;

}

</style>

</head>

<body>

<div id="radius">Border-Radius</div>

</body>

</html>

图：

设置两个值时，对角的值相同，top-left和bottom-right取第一个值，另外两个角取另一个值。

<!DOCTYPE html>

<html>

<head>

<style>

#radius

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

height:200px;

border-radius:25px 50px;

-moz-border-radius:25px 50px;

}

</style>

</head>

<body>

<div id="radius">Border-Radius</div>

</body>

</html>

效果：

另外还可以分别设置每个角的水平和垂直半径：

border-radius:15px 30px / 20px 10px;

等价于：

border-top-left-radius:15px 20px；

border-bottom-right-radius:15px 20px;

border-top-right-radius:30px 10px;

border-bottom-left-radius: 30px 10px;

效果：

另外，当圆角半径小于等于边框厚度时，内圆角会是方形的，这也很好理解，例如：

border:20px solid #a1a1a1;

border-radius:20px;

效果：

当圆角半径大于边框厚度时，边框内部也会呈现圆角效果：

border:10px solid #a1a1a1;

border-radius:20px;

效果：

可以利用圆角绘制圆形：

<!DOCTYPE html>

<html>

<head>

<style>

#radius

{

text-align:center;

margin:50px auto;

width:0;

height:0;

border:100px solid #a1a1a1;

border-radius:100px;

}

</style>

</head>

<body>

<div id="radius"></div>

</body>

</html>

效果：

还记得那个CSS3的哆啦A梦么？就是用了很多圆角绘制的。

CSS3之圆角的更多相关文章

  1. 超简单CSS3实现圆角、阴影、透明效果

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

  2. CSS3 -- 边框圆角

    文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. CSS3 border-radius 圆角属性

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...

  4. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  5. 无需图片，使用CSS3实现圆角按钮[转]

    首先来看看效果:   事例HTML代码: <a href="#" class="button green">button</a> < ...

  6. css3 样式 圆角

    第一次学习css3 现在总结一下,方便以后查看: 1.border-radius:25px; 这个用来增加圆角属性 2.CSS3边框阴影 在 CSS3 中,box-shadow 用于向方框添加阴影: ...

  7. 用CSS3写圆角（超简单）

    前缀: -moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome. CSS3圆角(所有的 ...

  8. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

  9. 【转载】无需图片，使用CSS3实现圆角按钮

    原文地址:http://www.open-open.com/home/space-37924-do-blog-id-5789.html 首先来看看效果: 事例HTML代码: <a href=&q ...

随机推荐

  1. sublime text2 css格式化插件

    插件下载地址:https://gist.github.com/2863474 插件,可以将CSS格式化成一行,也可以将一行格式化成多行. 下载解压缩之后,将compact_expand_css_com ...

  2. php全角字符转换为半角函数

    <?php /** * 全角字符转换为半角 * * @param string $str * @return string public function Sbc2Dbc($str) { $ar ...

  3. C#学习笔记二: C#类型详解

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  4. ALITUM DESIGNER 多PIN脚IC元件封装的制作

    多IC芯片的管教众多,一个一个的添加引脚效率较低,网上有好的方法,现总结如下 1 在元件库.schlib中新建元件,画出框图和添加第一个PIN脚 2利用smart paste快速放置众多PIN脚(具体 ...

  5. linux操作系统的分类及解释

    什么是Linux? 也许很多人会不屑的说,Linux不就是个操作系统么.错!Linux不是一个操作系统,严格来讲,Linux只是一个操作系统中的内核.内核是什么?内核建立了计算机软件与硬件之间通讯的平 ...

  6. ssh-keygen+ssh-copy-id无密码登录远程LINUX主机（转载）

    From:http://blog.163.com/lgh_2002/blog/static/44017526201011333227161/ 1.创建公钥和私钥 ligh@local-host$ ss ...

  7. ios8消息快捷处理——暂无输入框

    if (isiOS8) { //ios8的远程推送注册 NSSet *set = nil; #if 1 //1.创建消息上面要添加的动作(按钮的形式显示出来) UIMutableUserNotific ...

  8. ice介绍 z

    什么是ICE(Internet Communications Engine)呢,它是由Zeroc公司开 发的一套开源中间件系统,与DCOM,CORBA,WEB SERVICEDcom类似,支持RPC( ...

  9. log4net日志信息 插入 mysql数据库？

    log4net配置文件如下: <!--插入数据库--> <appender name="AdoNetAppender_MySql" type="log4 ...

  10. mongodb 查询使用

    > db.jd_58tc_raw.findOne() { "_id" : "2659e4e4caf0504ec4362478e2ed57ca", &quo ...