欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS3画一个半圆的方法 CSS半圆代码
这篇文章主要为大家详细介绍了CSS3画一个半圆的方法 CSS半圆代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

有的时候我们想通过CSS3来实现一个半圆,我们第一个想到的就是CSS3的border-radius属性。无论是圆角、圆弧、实心圆、半圆我们都可以使用该属性来实现,实现代码如下:

.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画一个半圆的方法 CSS半圆代码

实现代码如下:

<!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>


以上就是CSS3画一个半圆的方法 CSS半圆代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: CSS3 半圆 CSS半圆代码

上一篇JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码

下一篇织梦dedecms如何调用已审核的自定义表单留言

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在