技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
服务器技术
操作系统
网站运营

分类目录

热门标签

赞助商

搜索

【实例】CSS3画一个半圆的方法

作者:admin    时间:2017-7-25 6:24:27    浏览:

前文介绍了css3画实心圆和圆角的方法,本文将继续介绍用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画各种方向的半圆

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。

相关文章推荐

Tags: 圆角  css3  实心圆