border-radius制作各种图形

最新推荐文章于 2024-08-11 14:11:17 发布

pvfhv

最新推荐文章于 2024-08-11 14:11:17 发布

阅读量3.4k

点赞数

分类专栏： div+css 文章标签：圆角

本文链接：https://blog.csdn.net/pvfhv/article/details/6172816

版权

div+css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

css3提供了border-radius的属性，可以为网页元素设置圆形的角，从而界面优美了不少，也避免了图形后成圆角的加载问题，下面罗列了利用border-radius制作的圆形、半圆、1/4圆及椭圆，充分展示它的强大功能。

示例效果：

示例代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background: orange;
				margin: 10px;
				float: left;
			}
			#div1 {
				border-radius: 50%;
			}
			#div2 {
				height: 50px;
				line-height: 50px;
				border-radius: 50px 50px 0 0;
			}
			#div3 {
				width: 50px;
				border-radius: 0 50px 50px 0;
			}
			#div4 {
				height: 50px;
				line-height: 50px;
				border-radius: 0 0 50px 50px;
			}
			#div5 {
				width: 50px;
				border-radius: 50px 0 0 50px;
			}
			#div6 {
				border-radius: 100px 0 0 0;
			}
			#div7 {
				border-radius: 0 100px 0 0;
			}
			#div8 {
				border-radius: 0 0 100px 0;
			}
			#div9 {
				border-radius: 0 0 0 100px;
			}
			#div10{
			    height: 50px;
			    line-height: 50px;
			    border-radius: 100px/50px;
			}
			#div11{
                width: 50px;
                border-radius: 50px/100px;
            }
		</style>
	</head>

	<body>
		<div id="div1">
			圆形
		</div>
		<div id="div2">
			上半圆
		</div>
		<div id="div3">
			右半圆
		</div>
		<div id="div4">
			下半圆
		</div>
		<div id="div5">
			左半圆
		</div>
		<div id="div6">
			扇形1
		</div>
		<div id="div7">
			扇形2
		</div>
		<div id="div8">
			扇形3
		</div>
		<div id="div9">
			扇形4
		</div>
		<div id="div10">
			椭圆1
		</div>
		<div id="div11">
			椭圆2
		</div>
	</body>

</html>

pvfhv

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
border-radius制作各种图形

css3提供了border-radius的属性，可以为网页元素设置圆形的角，从而界面优美了不少，也避免了图形后成圆角的加载问题，下面罗列了利用border-radius制作的圆形、半圆、1/4圆及椭圆，充分展示它的强大功能。
复制链接

扫一扫

专栏目录