1、圆形
示例:
思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：
html:
css:
2、自适应椭圆
思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析.这意味着相同的百分比可能会计算出不同的水平和垂直半径。
代码如下：
html:
css:
[/code}</p>
<p><strong><font color="#ff0000">3、自适应的半椭圆:沿横轴劈开的半椭圆</font></strong></p>
<p><img border="0" alt="" src="http://files.weikejianghu.com/file_images/article/201608/2016081516050814.jpg" />
思路：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。</p>
<p>第一种方法就是使用它所对应的各个展开式属性：
[code]
„ border-top-left-radius
„ border-top-right-radius
„ border-bottom-right-radius
„ border-bottom-left-radius
</div>
我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值。举例来说，当 border-radius 的值为10px / 5px 20px 时，其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。
为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）
代码如下：自适应的半椭圆:沿横轴劈开的半椭圆
html:
css:
4、自适应的半椭圆:沿纵轴劈开的半椭圆
思路：自适应的半椭圆:沿纵轴劈开的半椭圆
代码如下：
html:
css:
5、四分之一椭圆
思路：其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。
代码如下：
html:
css:
6、用椭圆绘制opera浏览器的logo
思路：绘制opera浏览器的logo,分析起来不难，就只有两个图层，一个是最底部的椭圆，一个是最上面那层的椭圆。先确定一下最底层的椭圆宽高，量了一下，水平宽度为258px，垂直高度为275px，因为其是一个对称的椭圆，没有倾斜度，故4个角均为水平半径为258px，垂直半径为275px的4个相等椭圆，用同样的办法确定最里面的椭圆的半径，因此，四个角均为水平半径120px，垂直半径为229px的椭圆，代码如下：
html:
css:
7、平行四边形
思路：伪元素方案:是把所有样式（背景、边框等）应用到伪元素上，然后再对 伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。代码如下：
html: