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. hbase读写流程

    一. Hbase读流程 META表记录着表的原信息,根据rowkey查询META表,获取所在region信息 客户端去相应的regionServer查询数据,先查询memStore(memstore是 ...

  2. Navicat 11使用技巧

    入门 Navicat 是一个可多重连接的数据库管理工具,它可让你连接到 MySQL.Oracle.PostgreSQL.SQLite.SQL Server 和/或 MariaDB 数据库,让管理不同类 ...

  3. Maven使用--打包和运行

        将项目进行编译.测试后,下一个重要步骤就是打包.简单执行命令mvn clean package进行打包.Maven会在打包前执行编译.测试等操作.     在打包后,执行安装任务install ...

  4. PLSQL_基础系列11_递归和层次查询CONNECT BY（案例）

    2015-05-31 Created By BaoXinjian

  5. PLSQL_Database Link的基本概念和用法（概念）

    2014-06-08 Created By BaoXinjian

  6. NeHe OpenGL教程 第二十一课：线的游戏

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. 特殊情形的Riemann引理

    设 $f(x)$ 是 $[0,\infty)$ 上的单调函数, 则对任意固定的 $a$, 有 $\dps{\vlm{n}\int_0^a f(x)\sin nx\rd x =0}$; 若同时还有 $\ ...

  8. laravel5.2 移植到新服务器上除了“/”路由 ,其它路由对应的页面显示报404错误（Object not found!）———新装的LAMP没有加载Rewrite模块

    Laravel 框架通过 public/.htaccess 文件来让网址不需要 index.php.如果你的服务器是使用 Apache,请确认是否有开启 mod_rewrite 模块.如果 Larav ...

  9. php 防止sql注入

    Q:如果把用户输入的没有任何改动的放到SQL的查询语句中,很有可能会导致SQL注入,比如说下面的例子: $unsafe_variable = $_POST['user_input']; mysql_q ...

  10. css选择器权值

    有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p clas ...