必威体育Betway必威体育官网
当前位置:首页 > IT技术

border-radius熟悉写形状攻略

时间:2019-08-08 02:44:19来源:IT技术作者:seo实验室小编阅读:55次「手机版」
 

border-radius

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

a63ea1e9c2e04fc1b9856e3216652e3a.png

把这些基本的图形进行组合,还可以描绘成不同的图案,真的很棒。以下只是简单的几个举例,更多的图形,自己动手画吧。仅border-radius就能实现这么丰富的图案,如果再加上边框大小、渐变颜色和阴影等,将会添加更多的质感。

f05e9fa4e2a74eb29b74e4367cd4e28d.png

语法和解释

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

813c9763e3e543cb9e326708a381ed00.png

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

5fce493a944d4ce4ab060ed0a017f046.png

边框大小和外半径、内半径的关系

实际的内半径相当于外半径减去相应的边框大小。相减的值中如果至少一个为为负值或零,则内半径为直角。

不管怎样,相邻的两个边都会形成流畅的线条。

3e4bf313836244fba7d4e508a26491b1.png

编辑:千锋HTML5

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读