css3之border-radius理解
web DIV+CSS 2020-07-23 402 0
关于本站

淘淘IT

记录工作学习中的点点滴滴

本站创建于2017年,用于记录工作和学习中遇到的问题。同时,不断提升网站的使用体验,增加新的功能。

1431087 1530 17
最新评论
asfdsafasdf
评 ;!function(){}();
:kaixin:
评 thinkphp 3.2.3 Runtime\Logs日志文件太多怎么关闭日志功能
其他浏览器呢
评 对服务器的请求已遭到某个扩展程序的阻止
测试无效,还是有换行,是我的kindeditor版本问题吗,博主能否把你的kindeditor-all.js发我,谢谢 :kaixin:
评 kindeditor编辑器插入程序代码后在<p>标签和<pre>标签间会多出一行<p><br></p>
感谢大佬解决了我的问题
评 留言
文章标签更多
ThinkPHP (150)
Mysql (33)
DedeCms (32)
jQuery (37)
证件照 (1)
setInc (3)
setDec (3)
onclick (3)
打开边栏(ESC) 关闭边栏(ESC)

通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。

一、border-radius使用
border-radius的数值有三种表示方法:px、%、em,

对于border-radius的值的设置,我们常用的有三种写法:

(1)仅设置一个值
第一种方法,应该是我们最常用的一种情况了,常用来给button加圆角边框,或者画一个圆形按钮,仅需设置一个数值,即可给元素的四个边角设置统一的圆角弧度,例如:

#test1 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 30px;
}
from clipboard
#test2 {
   border: 3px solid red;
   height: 100px;
  width: 100px;
  border-radius: 53px;
}

from clipboard

(2)设置四个方向的值
  border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式,因此,border-radius : 30px;,其实等价于border-radius : 30px 30px 30px 30px;(ps:与padding和margin一样,各个数字之间用空格隔开)。
  这里要注意四个数值的书写顺序,不同于padding和margin的“上、右、下、左”的顺序,border-radius采用的是左上角、右上角、右下角、左下角的顺序,如下图所示:
from clipboard

(3)省略部分值
  与padding和margin一样,border-radius同样可以省略部分值,省略时同样是采用对角线相等的原则,例如:

#test3 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 50px 0px;
}
from clipboard

二、border-radius数值设置及显示效果的理解
  (1)使用px表示数值的情况
  在使用px来表示圆角值的时候,圆角的弧度一般都是一个圆形的部分弧形,具体呈现的显示效果我是按如下方法与预估和理解的:
  假设一个长200px,高150px的div对象,设置它的border-radius的值为30px,那么实际呈现的圆角,其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度,语言表达的可能不够透彻,看下面的例子应该可以明白。

#test4 {
    height: 150px;
    width: 200px;
    border-radius: 30px;
    background-color: cornflowerblue;
}
#circle {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: chartreuse;
}
<div id="test4">
    <div id="circle"></div>
</div>
from clipboard

这么去理解以后,下次再需要绘制圆形、各个方向的半圆、四分之一圆的时候,再也不需要去百度或者记住什么宽和高的比例必须是1比2之类的了,想象一下,大概就能知道比例和数值该怎么去设置了。哈哈,感觉有点乱,也不知道我描述的内容,除了我自己,你能不能看懂。

(2)使用%表示数值的情况
  使用%来表示圆角值的时候,如果对象的宽和高是一样的,那判断方法与第一点一致,只不过想象的时候,需要将宽高乘以百分数换算一下;
  如果宽高不一致,那产生的效果,其实就是以对象的宽高乘以百分数后得到的值r1和r2,作为两条半径绘制出来的椭圆产生的弧度。

#test5 {
    height: 100px;
    width: 200px;
    border-radius: 50%;
    background-color: cornflowerblue;
}
from clipboard

(3)需要注意的情况
   在设置对象为圆形的时候,如果使用了border、padding等情况时,对象的实际显示宽高已经不再是设置的width和height的数值,如果border-radius设置的值仍为原本的width和height的一半,可能达不到预期的真正的圆形的效果。
  如下面这个例子,给div加了10px的边框,但是border-radius仍是以100px的一半来设置的,显示出来的效果显然就不是一个真正的圆形。

#test6 {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    border: 10px solid #CCCCCC;
    background-color: cornflowerblue;
}
from clipboard

可以通过设置百分比50%的方式来解决这一情况,或者计算一下实际的高度再来设置border-radius的数值。上面这个例子,div实际的宽高应该是100 + 10 * 2 = 120px,所以border-radius应该设置为60px。

#test7 {
    height: 100px;
    width: 100px;
    border-radius: 60px;
    border: 10px solid #CCCCCC;
    background-color: cornflowerblue;
}
from clipboard

三、border-radius完整结构形式

在W3C上查border-radius属性时,会发现上面描述的语法是这样的:
border-radius: 1-4 length|% / 1-4 length|%;
   这是什么意思呢,我也看不懂,后来百度了解到,这是border-radius的完整写法,我们平时的写法其实都是简写,平时我们写的border-radius : 50px,其实完整的写法应该是:
border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;
   “/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径,什么是水平半径和垂直半径呢,见下图
from clipboard

from clipboard

版权声明:本篇文章来源于网络。 来源链接

相关推荐
css提示invalid property value
DIV+CSS | 2020-07-23 2594
网上复制了一段css代码,浏览器没有出现预定的样式,按F12打开调试模式,发现css属性前有个感叹号,鼠标经过提示“Invalid property value”无效的属性值,如图 应该是css有错误,后来发现css属性前的空格包含&emsp;“全角空格”,删连就可以了 复制空白粘贴到编辑器,然后切换到源...
&nbsp|&quot|&amp|&lt|&gt等html字符转义
DIV+CSS | 2017-05-18 1760
提示:请直接按CTRL+F搜索您要查找的转义字符。 常用表: No. 文字表記 10進表記 16進表記 文字   Comment ...
评论:0条
评论加载中...
发表评论