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

淘淘IT

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

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

757062 1186 11
最新评论
@xiaoniba 好像是编码GBK和utf-8的区别,请看下我摘抄的一篇文章,里面有介绍http://taotaoit.com/article/details/885.html,你可以尝试下是否可以
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
\x7f-\xff 这个匹配什么东东,会不会出现安全问题??? 改成这样如何 if ($strict && !preg_match('/^[\w\.\*\x{4e00}-\x{9fa5}]+$/u', $key)) {
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决 牛逼
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
文章标签更多
ThinkPHP (119)
Mysql (25)
DedeCms (28)
jQuery (27)
证件照 (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通过父元素选择子元素,选择第一个,第二个,最后一个,奇数偶数
DIV+CSS | 2017-07-27 1081
:first-child 选择器 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 例子1 选择列表中的第一个 <li> 元素并设置其样式: li:first-child { backgroun...
&nbsp|&quot|&amp|&lt|&gt等html字符转义
DIV+CSS | 2017-05-18 944
提示:请直接按CTRL+F搜索您要查找的转义字符。 常用表: No. 文字表記 10進表記 16進表記 文字   Comment ...
评论:0条
评论加载中...
发表评论