css怎么移动半圆,css3半圆

Document

div {

margin-bottom: 30px;

margin-left: 30px;

}

/* 上半圆 */

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

/* 左上、右上、右下、左下 */

}

/* 椭圆 */

.semi-circle5 {

width: 100px;

height: 100px;

border-radius: 100px 0px 100px 0px;

background: green;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

.semi-circle6 {

border-radius: 100px 0 0;

width: 50px;

height: 50px;

background-color: aquamarine;

}

扇形原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变(等于0)。

效果图：

css3实现半圆和圆效果

在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率. 无论圆角.圆弧.实 ...

css3画半圆的两种方法

css3画半圆 ， 加上一点动画

border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

css3画半圆

border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...

css3 画半圆和1/4圆

半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...

纯CSS3实现的一些酷炫效果

之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

css3圆形百分比进度条的实现原理