您的位置:首页> 前端教程> CSS3教程
文章导航

CSS border-radius

2019-11-20 15:03| 作者: admin| 查看: 592| 评论: 0|来自: 蚂蚁部落

绘制圆角效果是常见的操作,因为带有一定弧度的图案可能更加圆润自然。

CSS3之前,实现圆角效果非常困难,通常采用边框层叠累计以达到圆角视觉效果。

由于border-radius属性的出现,使得绘制圆角效果变得更为简单灵活。

下面结合代码实例详细介绍一下此属性的用法,首先看一段实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div { 
  margin:0px auto;
  width: 100px; 
  height: 100px; 
  background-color:green;
  border-radius: 50px; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150406k5ijjjit4jg9czid.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

矩形的长宽高是100px,然后将圆角半径设置为50px,生成一个圆形效果。

可见通过border-radius属性可以非常简单的实现圆角效果,下面详细对其一下介绍。

一.语法结构:

border-radius属性绘制的圆角不一定是正圆,也可能是椭圆,具体效果由水平半径与垂直半径决定。

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150424c604hccca0ah2akz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

简单总结如下:

(1).一个矩形可以具有一到四个圆角。

(2).圆角是一个正圆或者椭圆的四分之一。

(3).圆角的水平半径和垂直半径并不一定相等。

再来分析一下它的具体语法实现,属性值用于规定圆角半径的尺寸。

既可以是length格式,也可以是百分比格式,后续文章会进行详细分析。

属性值大致可以分为具有斜杠和不具有斜杠两种。

不具有斜杠:

如果参数值不具有斜杠,那么水平半径与垂直半径尺寸相同。

(1).一个属性值:

此属性值作用于四个圆角,代码片段如下:

[CSS] 纯文本查看 复制代码
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 20px;
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150502m25h9frg9ihoz2pt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).两个属性值:

第一个属性值作用于左上和右下圆角。

第二个属性值作用于右上和左下圆角。

代码片段如下:

[CSS] 纯文本查看 复制代码
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 20px 10px;
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150530julohrkr9wrig99g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(3).三个属性值:

第一个属性值作用于左上圆角。

第二个属性值作用于右上和左下圆角。

第三个属性值作用于右下圆角。

代码片段如下:

[CSS] 纯文本查看 复制代码
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 20px 10px 30px;
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150616ai9jh4y9z1zhcww6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(4).四个属性值:

第一个属性值作用于左上圆角。

第二个属性值作用于右上圆角。

第三个属性值作用于右下圆角。

第四个属性值作用于左下圆角。

代码片段如下:

[CSS] 纯文本查看 复制代码
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 10px 20px 30px 40px;
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150705hy8xzrh8pv44bho8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具有斜杠:

不具有斜杠的时候,水平半径与垂直半径的尺寸没法分别规定。

采用具有斜杠的语法结构,可以解决上述问题,看如下代码:

[CSS] 纯文本查看 复制代码
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150746dguuvpsu7tfsqq8u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下:

(1).斜杠左侧的参数用于规定圆角水平直径尺寸。

(2).斜杠右侧得参数用于规定圆角垂直直径尺寸。

(3).两侧的数据按照左上角、右上角、右下角和左下角顺序生效。

(4).两侧数据可以规定一个或者四个,生效顺序与没有斜杠时相同。

二.百分数作为属性值:

属性值也可以是百分比格式,使用方式与length格式相同。

唯一需要搞清楚的是,百分别格式的尺寸参考对象。

为了节省篇幅,具体参阅CSS border-radius 百分数一章节。

三.带有边框的圆角效果:

前面的例子中,矩形不带有边框,当然也可以带边框。

原理都是一样的,单独拿出来介绍,主要是为了提醒几个注意点。

为了节省篇幅,具体参阅CSS border-radius 带边框一章节。

四.半径之和超过元素尺寸:

有可能各种原因导致相邻的半径之和可能会超过元素对应方位尺寸。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 200px;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

div的宽高都是100px,但是设置圆角半径尺寸是200px。

很明显,相邻圆角直径的和是400px,远超过div的尺寸。

这个时候,浏览器会自动重新计算一个恰当的值,保证使它们处于不重合的临界状态。

所以浏览器重新给半径赋值为50px,恰好生成一个正圆,相邻的直径恰好不会重合。

五.水平直径和垂直直径尺寸比例规定:

这是很重要的一个特点,很多初学者比较容易忽视。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  margin:0px auto;
  width: 200px;
  height: 300px;
  background-color:green;
  border-radius:200px;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/150913pln9z1gzllhlnrlz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).规定水平和垂直半径的尺寸都为200px。

(2).但是矩形宽度只有200px,所以浏览器会重新计算,将水平直径尺寸定位100px。

(3).矩形高度是300px,那是不是垂直半径被重新计算为150px呢,答案是否定的。

(4).我们规定水平和垂直半径的尺寸都是200px,它们是相等的,这个比例要永恒保持下去。

(5).所以垂直半径的尺寸也是100px。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部