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. 用aauto做游戏修改器

    import win.ui; import process; //以下自动生成,不用看. /*DSG{{*/ ;bottom=) winform.add( button={cls=;top=;righ ...

  2. 编写一个程序对Largest函数进行测试,找出一组数据的最大值

    源程序代码: import java.util.Scanner; public class findmax { public static void main(String[] args) { // ...

  3. Expert C# 5.0中的Linq部分

    1.先看看.NET中的Linq 2.扩展方法 3.Lambda表达式和表达式树 4.Linq中的延迟操作 5.Linq中的查询方法 5.1分割操作 5.2连接操作 5.3排序操作 5.4分组和连接 5 ...

  4. 回调--一个经典例子让你彻彻底底理解java回调机制

    本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢 以前不理解什么叫回调 ...

  5. 解决Xshell和vim中文乱码（转载）

    From:http://blog.csdn.net/lovey599/article/details/7275403 一般而言,乱码多是由于编码问题引起 的,在windows系统中,大多数情况下中文编 ...

  6. git fetch和git pull（转载）

    From:http://www.tech126.com/git-fetch-pull/ Git中从远程的分支获取最新的版本到本地有这样2个命令: 1. git fetch:相当于是从远程获取最新版本到 ...

  7. Android 2.3 NFC简介

    Android 2.3加入了NFC(近场通讯)的支持.官网developer.android.com的英文介绍如下:Near Field Communications (NFC)Android 2.3 ...

  8. Intellij IDEA 使用Spring-boot-devTools无效解决办法

    相信大部分使用Intellij的同学都会遇到这个问题,即使项目使用了spring-boot-devtools,修改了类或者html.js等,idea还是不会自动重启,非要手动去make一下或者重启, ...

  9. cursor详解

    源地址:http://www.cnblogs.com/jiewoyishengwzm/archive/2010/06/08/1754232.html 查询 SELECT语句用于从数据库中查询数据,当在 ...

  10. c#内置颜色大全