本文目录
- border-radius的值怎么定义
- 详解border-radius属性
- border-radius属性是什么
- border-radius 怎么设置圆
border-radius的值怎么定义
border-radius的含义是：圆角。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。
详解border-radius属性
其实通过一张示意图来理解的话就很容易了，那么我先来画一张示意图。
by三人行慕课
我们可以理解成是在角的位置放了一个圆形，而我们设置的参数就是圆形的半径，/前和/后分别是水品半径和垂直半径（横向的半径和纵向的半径）。
设置参数的顺序分别是左上、右上、右下、左下，在这里简称为1、2、3、4
我们设置这样的参数 50px 50px 50px 50px/25px 25px 25px 25px;（相当于50px/25px）
也就是1 2 3 4的水平半径都是50像素，垂直半径都是25像素，就会得到这样的图形：
by三人行慕课
我们来分析一下就是
by三人行慕课
这样看起来就显而易见，横向半径是50px，纵向半径是25px。
border-radius属性是什么
borderradius是CSS3设置圆角的一个属性，其属性值得单位可以使用：em、px、百分比等等。设置原则：一个值，则用其为半径构建圆形，这个圆与边框的交集形成圆角效果。两个值，则用两个值分别为半长轴、半短轴构建椭圆，这个圆与边框的交集形成圆角效果。
圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。在网页设计越来越精美的今天，圆角的应用已经越来越广泛。borderradius的用途：为边框设置圆角，若无边框，则会作用到背景上。
圆是一种几何图形。根据定义，通常用圆规来画圆。同圆内圆的直径、半径长度永远相同，圆有无数条半径和无数条直径。当多边形的边数越多时，其形状、周长、面积就都越接近于圆。所以，世界上没有真正的圆，圆实际上只是概念性的图形。
border-radius 怎么设置圆
用CSS3 border-radius属性可以给元素（如：button/div）添加圆角边框：div{ text-align:center; border:1px solid black; padding:10px 40px; background:#dddddd; width:350px; border-radius:20px;}button{ width:100px; height:50px; border-radius:25px;}《div》div《/div》《button》button《/button》其中：border-radius:25px;的值决定了圆角弧度