CSS-边框-画圆玩

css边框-画图-圆形

上节我们画了三角形，这节我们尝试一点圆嘟嘟的东东

我们直接看图

当然，我们通过相邻边框接壤原则

【夯基石】- CSS-边框-画个三角形玩玩

和css3.0的圆角属性border-radius适当的调整大小会有各种不同的效果出现

简单说一下border-radius的简写属性

border-radius:100px 0 0 100px; 相当于以下四行：

border-top-left-radius: 100px;

border-top-right-radius: 0px;

border-bottom-right-radius: 0px;

border-bottom-left-radius: 100px;

在理解了原理之后，我们就可以画出下面这张图上的四分之一圆

想一想，或许我们适当的调整一下边框宽度和圆角会得到什么效果

可以自己先试一试，然后看下面的图

今天我们简单的通过border-radius画了一些可爱的小玩意儿，下次我们可以看看是不是可以搭配其它属性画出点儿别的东西