参数间的,radius参数详解
分类:前端操作

W3School学到这个实例:

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情。radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角,把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

> >

语法和解释

 





border-radius 属性允许您向元素添加圆角。

 

border-radius可以通过值来定义样式相同的角,也对每个角分别定义。下面的表格解释了各个写法所表示的效果。

截止今天中午,我对于border-radius的理解就是下面这样子:

语法

-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;

border-radius:10px

尝试运用了,效果是对的。我自以为掌握了border-radius。。。显然,我错了。

解释

但是在学习的过程中我犯了个很大的错误:不知其所以然。

将创建四个大小一样的圆角,如图1和2。

 

语法

下午看到一个例子,运用到border-radius,并解释了使用。

border-radius:10px 15px 10px 5px;

border-radius 的语法:

解释

border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 

四个值分别表示左上角、右上角、右下角、右下角。

也就是说,圆角不一定是正圆,可以是椭圆。

语法

 

border-radius:10px 15px;

我尝试了这样的代码:

解释

无标题文档





border-radius

第一个值表示左上角、右下角;第二个值表示右上角、左下角。

结果不是椭圆的角,而是左上和右下角是10px的1/4圆,右上和左下是5px的1/4圆。为什么?我明明是设置了两个参数。

语法

再看语法,汗。。。理解失误!!!

border-radius:10px 15px 5px;

<length>{1,4} [/ <length>{1,4} ]?  两参数之间有/

解释

再试

第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。

无标题文档





border-radius

语法

这样效果出来了。

border-bottom-left-radius:20px 10px;

 

解释

在脚本之家网站有个介绍border-radius的,非常详细。

创建不对称的角–椭圆角。

 

语法

 

border-radius:20px/10px;

 

解释

border-radius 属性允许您向元素添加圆角。 截止今天中午,我对于border-radius的理解就是下面这样子: -webkit-border-radi...

写椭圆角的时候,可以用短写法,创建四个一样的椭圆角。

语法

border-radius:10px 20px 30px 40px

解释

四个值分别表示四个角的半径(水平和垂直半径一样),如图11。

语法

border-radius:10px 20px 30px 40px/20px 50px 30px 10px;

解释

斜杠前面的一组四个值分别表示四个角的水平半径;斜杠后面的一组四个值分别表示四个角的垂直半径。

语法

border-radius:10px 20px 40px/20px 50px

解释

斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。两个值、三个值的顺序规则你懂的哈。

对于每个角的两个值,分别代表的是该角的水平方向和垂直方向的半径。若有四个值,上面表格有解释。看下面这个图,或许会清晰些。边框大小和外半径、内半径的关系

实际的内半径相当于外半径减去相应的边框大小。相减的值中如果至少一个为为负值或零,则内半径为直角。不管怎样,相邻的两个边都会形成流畅的线条

本文由正版必中一肖图发布于前端操作,转载请注明出处:参数间的,radius参数详解

上一篇:webStorm火速键大全,快捷编码技艺 下一篇:js动态调用css属性的小规律
猜你喜欢
热门排行
精彩图文