圆角边框

一、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圆角边框的更多相关文章

  1. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  2. css3圆角边框，边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  3. CSS3圆角边框的使用-遁地龙卷风

    0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...

  4. CSS3圆角

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

  5. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  6. css3(border-radius)边框圆角详解

    传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...

  7. css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...

  8. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  9. css3(border-radius)边框圆角详解（转）

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

随机推荐

  1. 20191127 Spring Boot官方文档学习（4.10）

    4.10.使用SQL数据库 从使用JdbcTemplate直接的JDBC访问到完整的"对象关系映射"技术(例如Hibernate),Spring框架为使用SQL数据库提供了广泛的支 ...

  2. Balanced Binary Tree（平衡二叉树）

    来源:https://leetcode.com/problems/balanced-binary-tree Given a binary tree, determine if it is height ...

  3. [转帖]TLS握手：回顾1.2、迎接1.3

    TLS握手:回顾1.2.迎接1.3 novsec2019-05-10共26541人围观 ,发现 2 个不明物体网络安全 *本文原创作者:novsec,本文属于FreeBuf原创奖励计划,未经许可禁止转 ...

  4. 将从model中获得的数据传到js函数中

    刚遇到了一种情况,从controller中获得的model是一个集合,需要将这个集合循环放到标签中,并且需要为这些标签添加点击事件,每个值传入对应的点击事件函数中,由于model中的值是通过${ite ...

  5. Node+Express+MySql实现简单增删改查和登录

    var express = require('express'); var mysql = require('mysql'); var app = express(); var bodyParser ...

  6. 权限控制（vue）

    权限控制(vue) 经常会遇到,角色权限控制问题,若是页面控制,倒好说,可如果是当前页面部分可见不可见,这就有些麻烦,如果加上条件就更加苛刻.之前只是简单的v-if进行控制,如今想试试指令(网上一直有 ...

  7. 动态规划（股票交易）---只能进行 k 次的股票交易

    只能进行 k 次的股票交易 188. Best Time to Buy and Sell Stock IV (Hard) 题目描述:   只能进行K次股票交易,求能获得的最大利润 思路分析:   和只 ...

  8. scala学习笔记(7)

    1.包 --------------------------------------- Scala中的包和Java或者C++中命名空间的目的是相同的:管理大型程序中的名称. package a{ pa ...

  9. tomcat 启动报错 解决办法 A child container failed during&nbsp

    转自:http://blog.sina.com.cn/s/blog_4e1e357d0102v55c.html 控制台报错: Caused by: org.apache.catalina.Lifecy ...

  10. 在XCode中使用XCTest

    测试驱动开发并不是一个很新鲜的概念了.在我最开始学习程序编写时,最喜欢干的事情就是编写一段代码,然后运行观察结果是否正确.我所学习第一门语言是c语言,用的最多的是在算法设计上,那时候最常做的事情就是编 ...