前文介绍了css3画实心圆和圆角的方法,本文将继续介绍用CSS3来画一个半圆的方法。 CSS3画一个半圆 无论圆角、圆弧、实心圆、半圆,css3的实现代码都是 border-radius 属性,border-radius 不但可以定义圆半径和圆角大小,还可以设置圆弧的方向,进而画出各种方向的半圆。 实现代码很简单,一个上半圆的css3代码如下:
.semi-circle{ width:100px; height:50px; background-color:#cb18f8; border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */ } execcodegetcode 代码分析: 1)利用 border-radius 定义各个方向的圆弧半径,把左上和右上的圆角半径设为50px,右下和左下的圆角半径设为0,出来的效果就是一个上半圆了。 2)圆角半径要等于矩形高度 height ,上例的值是50px。 各种方向的半圆上例是一个上半圆的实现代码,我们可以调整 border-radius 的值,以及矩形宽度(width)和高度(height)的值,从而实现各种方向的半圆。如图: CSS3画各种方向的半圆 html代码如下: <!DOCTYPE html> <head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /* 上半圆 */ .semi-circle{ width:100px; height:50px; background-color:#cb18f8; border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */ } /* 下半圆 */ .semi-circle2{ width:100px; height:50px; background-color:#cb18f8; border-radius:0 0 50px 50px; /* 左上、右上、右下、左下 */ } /* 左半圆 */ .semi-circle3{ width:50px; height:100px; background-color:#cb18f8; border-radius:50px 0 0 50px; /* 左上、右上、右下、左下 */ } /* 右半圆 */ .semi-circle4{ width:50px; height:100px; background-color:#cb18f8; border-radius:0 50px 50px 0; /* 左上、右上、右下、左下 */ } table{ width:400px; } </style> </head> <body> <table><tr> <td><div class="semi-circle"></div></td> <td><div class="semi-circle2"></div></td> <td><div class="semi-circle3"></div></td> <td><div class="semi-circle4"></div></td> </tr></table> </body> </html> execcodegetcode 代码分析: 1)利用 border-radius 定义各个方向的圆弧半径,把同方向的两个圆角半径设为50px,其余两个圆角半径设为0,出来的效果就是一个半圆了。 2)圆角半径要等于矩形高度 height 或宽度 width,各实例的值均是50px。 相关文章推荐 - css3画实心圆和圆角的方法
- 纯CSS实现圆角样式的4种写法,比CSS3兼容性更好
|