html半圆形,【实例】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; /* 左上、右上、右下、左下 */

}

代码分析：

1)利用 border-radius 定义各个方向的圆弧半径，把左上和右上的圆角半径设为50px，右下和左下的圆角半径设为0，出来的效果就是一个上半圆了。

2)圆角半径要等于矩形高度 height ，上例的值是50px。

各种方向的半圆

上例是一个上半圆的实现代码，我们可以调整 border-radius 的值，以及矩形宽度(width)和高度(height)的值，从而实现各种方向的半圆。如图：

CSS3画各种方向的半圆

html代码如下：

/* 上半圆 */

.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;

}

html半圆形,【实例】CSS3画一个半圆的方法相关推荐

[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
教你用CSS3画一个透视、旋转的正方体
教你用CSS3画一个透视.旋转的正方体正方体六个面,无非就是,将每个面进行translateZ提升/降低边长的一半,然后再进行rotate X/rotate Y (n*90deg)的旋转即可. ht ...
html实现画苹果,基于CSS3画一个iPhone
实现效果: 实现代码 html css3 html, body { height: 100%; } body { text-align: center; padding: 50px; backgrou ...
python在坐标轴上画矩形_Python使用matplotlib实现在坐标系中画一个矩形的方法
本文实例讲述了Python使用matplotlib实现在坐标系中画一个矩形的方法.分享给大家供大家参考.具体实现方法如下: import matplotlib.pyplot as plt from m ...
[css] 请使用css画一个圆，方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
用css3画一个哆啦A梦
今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识.用css作画最重要的就是要做好定位,其次是通过边框属性来切割 ...
vbs画动态爱心代码_前端必看之如何用CSS3画一个八卦和爱心
昨天雷雨交加,燥热有所缓解.今晨空气清新,再加上马上三天小长假,心情很不错,祝各位小长假玩的开心.那么,今天就用CSS3做些"不正紧"的事:画八卦和爱心. CSS3我们一般都是用来 ...
html5 骰子滚动,CSS3画一个滚动的骰子
今天利用CSS3来画一个自动滚动的骰子. 思路:骰子的六个面分别用六个ul标签,每个面的点数就是li标签,点数的排列采用伸缩布局,然后采用定位和transform属性将六个面翻转折叠成立方体. 1.H ...
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
[摘要] 本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例. 不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解 ...

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

html半圆形,【实例】CSS3画一个半圆的方法相关推荐

最新文章

热门文章