圆角边框

一、border-radius属性简介

为元素添加圆角边框，可以对元素的四个角进行圆角设置（属性不具有继承性）

二、border-radius定义方法

border-radius属性有两种定义方法：border-radius可以一次性对四个角设置相同的值(简写属性)，也可对4个角分别设置圆角样式(单独属设性置)。

（一）单独属性设置

border-radius：同时设置四个边框的圆角样式；

border-top-left-radius：设置左上角边框的圆角样式；
border-top-right-radius：设置右上角边框的圆角样式；
border-bottom-left-radius：设置左下角边框的圆角样式；
border-bottom-right-radius：设置右下角边框的圆角样式；

注意【边框的顺序不能打乱，比如border-top-left-radius就不可以写成border-left-top-radius 属性是固定的。】

通过实际操作可以看出二者表达效果是相同的。

（二）简写属性

为border-radius设置四个参数,要注意顺序关系

1、为属性只设置一个值，四个边框的圆角都采用相同的值

border-radius：20px //四个边框圆角为20px

2、为属性设置两个值，第一个值设置左上角和右下角，第二个值设置右上角和左下角

border-radius: 20px 50px //左上角和右下角20px，右上角和左下角50px

3、为属性设置三个值，第一个值设置给左上角，第二个值设置给右上角和左下角，第三个值设置给右下角

border-radius: 20px 50px 5px //左上角20px，右上角和左下角50px，右下角5px

4、为属性设置四个值，第一个值设置给左上角，第二个值设置给右上角，第三个值右下角，第四个值左下角（按照顺时针方向）

border-radius: 20px 50px 5px 100px //左上角20px，右下角50px，右下角5px ，左下角100px

三、分别设置水平半径和垂直半径

border-radius的语法

border-radius: {1-4} length /% / {1-4} length /%;

border-radius: 20px 10px 40px / 25px 30px

length 定义圆角的形状；% 以百分比定义圆角的形状；{1-4} border-radius的参数个数范围为1~4个

注释【按此顺序设置每个 radii(半径)的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

border-radius的参数个数范围为1~4个，这里要注意水平半径和垂直半径的分别使用时：在border-radius中先设置4个边角的水平半径再设置4个边角的垂直半径。】

实例：

div{border-radius: 20px 5px 100px/15px 30px;}

等价于

div{ border-top-left-radius: 20px 15px;

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

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

       border-bottom-left-radius: 5px 30px;}

表达效果

四、应用
使用border-radius创建圆形
输入border-radius：r，这里的r元素的半径大小（有长度单位），要创建圆形应设置r的值为元素高度和宽度的一半。
当元素的高度和宽度相等时，这种取值方法就是圆形。
代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css3圆角边框</title>

     <style>

     #box1{

         width: 200px;

         height: 200px;

         background-color: #567;

         border:5px solid red;

         border-radius: 50%;

                margin: auto;

                box-shadow:10px 10px 5px #a2a2a3 ;}

     </style>

 </head>

 <body>

 <div class="box2">

     <div id="box1"></div>

 </div>

 </body>

 </html>

表现效果

当我们设置元素的宽和高不再相等，改成 width：200px；height：100px 时，表现出来的则是椭圆形。

border-radius实现圆形和半圆效果

border-radius中有这样一个特性：

给任何正方形设置一个足够大的border-radius，就可以把它变成一个圆形。

注意：当任意两个相邻的圆角的半径之和超过 borderbox 的尺寸之后，用户代理必须按照比例缩小各个边框半径所示用的值，直到它们不会相互重叠为止。

为什么叫border-radius ？

可能有些人会奇怪，border-radius到底由何得名。这个属性并不需要边框来参与工作，似乎叫做内容圆角更合适一些。

实际原因是 border-radius 是对元素borderbox 进行切圆角处理的。当元素没有边框时，可能还看不出差异；当它有边框时，则以边框外侧的拐角作为切圆角的基准。边框内侧的圆角会稍小一些（严格来说内角半径将是 max（0,border-radius-border-width））。

实例：

（一）、border-radius画圆形

div{

        width:200px;

        height:200px;

        border-radius:50%;

        background: #f775a9;

    }

表现效果：

要想实现一个圆形，首先要设置出一个正方形。
给border-radius设置任何大于或等于50%的百分数，都可以实现圆形效果。

例如：设置border-radius:70%，同样可以得到一个圆形。

（二）、border-radius实现四个方向的半圆

圆角相当是边框对内容的切割，圆角值设置的越大相当对元素切割越圆。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>border-radius</title>

    <style type="text/css">

    .box1{

        width:200px;height:100px;

        border-radius:400px 400px 0 0;

        background: #f775a9;

        float:left;

    }

    .box2{

        width:100px;height:200px;

        border-radius:300px 0 0 300px;

        background: #fabab8;

        float:left;

    }

    .box3{

        width:200px;

        height:100px;

        border-radius:0 0 200px 200px ;

        background: #aadfe6;

        float:left;

    }

    .box4{

        width:100px;height:200px;

        border-radius:0 100px 100px 0;

        background: #79e0c3;

        float:left;

    }

    .box5{

        width:100px;height:200px;

        border-radius:0 50px 50px 0;

        background: #acbfea;

        float:left;

    }

    </style>

</head>

<body>

<div class="box1">1</div>

<div class="box2">2</div>

<div class="box3">3</div>

<div class="box4">4</div>

<div class="box5">5</div>

</body>

</html>

css3圆角边框的更多相关文章

纯代码利用CSS3 圆角边框和盒子阴影制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影制作 iphone 手机效果大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
CSS3圆角边框的使用-遁地龙卷风
0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...
CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
css3(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
css3学习总结2--CSS3圆角边框
绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...
css3如何实现圆角边框
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...
css3(border-radius)边框圆角详解（转）
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术传统的圆角生成方案,必须使用多 ...

随机推荐

ARTS-3
ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...
一个JSON解析器
来源 <JavaScript语言精粹(修订版)> 代码 <!DOCTYPE html> <html> <head> <meta charset=& ...
【MM系列】SAP 客户增强
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 客户增强前言部分大家 ...
【Linux开发】CCS远程调试ARM，AM4378
注意一点:CCS也是安装在Linux主机上的,不是安装在Windows上的,我在Windows上做出了很多尝试,但最终也不没明白究竟要用怎样的格式去执行在ARM-Linux应用程序,out文件ELF可 ...
Canvas入门05-渐变颜色
线性渐变API: ctx.createLinearGradient(double x1, double y1, double x2, double y2) 创建一个渐变实例 (x1, y1) 渐变的起 ...
return语句
定义一个函数:可以定义一个由自己想要功能的函数,以下是简单的规则: (1).函数代码块以 def 关键词开头,后接函数标识符名称和圆括号(). (2).任何传入参数和自变量必须放在圆括号中间.圆括号之 ...
for语句与if语句嵌套的简单应用
1.循环语句 for(初始条件:循环条件:状态改变) { 循环体 } break为跳出循环,continue为结束此次循环. 2.死循环常用while语句 while(判断语句) { if(判断) { ...
记：第一次更新服务器CUDA和GPU驱动
因有需求需要改动centos7中的CUDA(更新到10)和GUP 的driver(更新到410)的版本. 事先需要查看原版本的信息,使用nvidia-smi可以查看driver的版本信息(最新的也显示 ...
jQuery中this与$(this)的区别总结
这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.titl ...
S-Nim HDU 1536 博弈 sg函数
S-Nim HDU 1536 博弈 sg函数题意首先输入K,表示一个集合的大小,之后输入集合,表示对于这对石子只能去这个集合中的元素的个数,之后输入一个m表示接下来对于这个集合要进行m次询问,之 ...

css3圆角边框