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

CSS3 border-radius 属性

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

以下为三个实例：

1. 指定背景颜色的元素圆角：

圆角！

2. 指定边框的元素圆角:

圆角！

3. 指定背景图片的元素圆角:

圆角！

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

#rcorners1 {

    border-radius: 25px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners2 {

    border-radius: 25px;

    border: 2px solid #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners3 {

    border-radius: 25px;

    background: url(/images/paper.gif);

    background-position: left top;

    background-repeat: repeat;

    padding: 20px;

    width: 200px;

    height: 150px;

}

</style>

</head>

<body>

<p> border-radius 属性允许向元素添加圆角。</p>

<p>指定背景颜色元素的圆角:</p>

<p id="rcorners1">圆角</p>

<p>指定边框元素的圆角:</p>

<p id="rcorners2">圆角</p>

<p>指定背景图片元素的圆角:</p>

<p id="rcorners3">圆角</p>

</body>

</html>

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

  • 一个值： 四个圆角值相同

以下为三个实例:

1. 四个值 - border-radius: 15px 50px 30px 5px:

2. 三个值 - border-radius: 15px 50px 30px:

3. 两个值 - border-radius: 15px 50px:

以下为源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

#rcorners4 {

    border-radius: 15px 50px 30px 5px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners5 {

    border-radius: 15px 50px 30px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners6 {

    border-radius: 15px 50px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

</style>

</head>

<body>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>

<p id="rcorners4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>

<p id="rcorners5"></p>

<p>两个值 - border-radius: 15px 50px:</p>

<p id="rcorners6"></p>

</body>

</html>

您还可以创建椭圆边角:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

#rcorners7 {

    border-radius: 50px/15px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners8 {

    border-radius: 15px/50px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners9 {

    border-radius: 50%;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

</style>

</head>

<body>

<p>椭圆边框 - border-radius: 50px/15px:</p>

<p id="rcorners7"></p>

<p> 椭圆边框 - border-radius: 15px/50px:</p>

<p id="rcorners8"></p>

<p>椭圆边框 - border-radius: 50%:</p>

<p id="rcorners9"></p>

</body>

</html>

CSS3 圆角属性

属性 描述
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

[HTML] CSS3 圆角的更多相关文章

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

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

  2. CSS3圆角

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

  3. CSS3 圆角制作的消息提示图标

    CSS3 圆角制作的消息提示图标,如果你想知道它是如何被开发的,请点击连接查看.http://www.gbtags.com/gb/rtreplayerpreview/142.htm

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

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

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

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

  6. IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）

    IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc 2.CSS box { -moz-border-radius: 15 ...

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

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

  8. CSS3圆角详解

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

  9. css3圆角讲解

    Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角值: 这个值可以使用:em ,ex,pt,px,百分比; Border-radius跟margin ...

随机推荐

  1. C#/ASP.NET MVC微信公众号接口开发之从零开发（三）回复消息 （附源码）

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

  2. iOS iPad开发之UIPopoverController的使用

    1. 什么是UIPopoverController? 是iPad开发中常见的一种控制器(在iphone上不允许使用) 跟其他控制器不一样的是,它直接继承自NSObject,并非继承自UIViewCon ...

  3. C语言基础--变量存储细节

      1.变量为什么要有类型? 每种类型占用的内存空间不一样 int 4, char 1 double 8 2.只要定义变量, 系统就会开辟一块存储空间给我们的变量存储数据, 内存寻址是从大到小 3.越 ...

  4. select document library from certain list 分类： Sharepoint 2015-07-05 07:52 6人阅读 评论(0) 收藏

    S using System; using Microsoft.SharePoint; namespace Test { class ConsoleApp { static void Main(str ...

  5. json体会

    1.用json-lib的jar包,创建JsonObject的对象(其引用取名jo),JsonObject jo = new JsonObject(); 再创建一个jsonobject对象:JsonOb ...

  6. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  7. checkbox 全选，反选 ，全不选

    在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...

  8. php建立MySQL数据表

    <?php $connect = mysql_connect("127.0.0.1","root",""); mysql_select ...

  9. super.onCreate(SavedInstanceState);

    super.onCreate(SavedInatanceState)时调用父类的构造方法,SavedInstanceState是保存当前Activity的状态信息. onCreate方法的参数是Bun ...

  10. 百度翻译&&金山词霸API

    #/usr/bin/env python3 #coding=utf8 """百度翻译api功能实现函数,本模块基于Python3.x实现,getTransResult(q ...