11.圆角外边框

最新推荐文章于 2022-05-12 17:19:36 发布

P_ning

最新推荐文章于 2022-05-12 17:19:36 发布

阅读量172

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/P_ning/article/details/90733797

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

圆角外边框


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	div{
		width:500px;
		height:500px;
		border:2px #F00 solid;
		background-color:#CF0;
		margin:100px;
	}
	div.c1{
		border-radius:50%;
	}
	div.c2{
		border-radius:200px;
	}
	div.c3{
		border-radius:200px 100px;;
	}
	div.c4{
		border-radius:200px 100px 50px;
	}
	div.c5{
		border-radius:200px 100px 50px 25px;
	}
</style>
</head>

<body>
<div></div><!--为设置时-->

<div class="c1"></div><!--用百分比-->

<div class="c2"></div><!--设置像素时,顺时针,和边框一样,不过它时将左上角为起点-->
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
</body>
</html>

实例


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	a{
		width:100px;
		height:100px;
		border:1px #F00 solid;
		background-color:#FFF;
		color:#F00;
		text-align:center;
		line-height:100px;
		display:inline-block;
		border-radius:50%;
		margin:auto 100px;
		text-decoration:none;
	}
	a:hover{
		background-color:#F00;
		color:#FFF;
	}
</style>
</head>

<body>
<a href="#">文字1</a>
<a href="#">文字1</a>
<a href="#">文字1</a>
<a href="#">文字1</a>

</body>
</html>

运用到导航栏上


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	div{
		width:500px;
		height:400px;
		background:url(../image/1.PNG) no-repeat top center;
		margin:auto;

	}
	.c1,.c2,.c3,.c4{
		width:10px;
		height:10px;
		border-radius:50%;
		background:#6FF;
		display:inline-block;
		margin:280px 10px 10px;
	}
	.c1{
		margin-left:200px;
	}
	.c1:hover,.c2:hover,.c3:hover,.c4:hover{
		background:#00F;
	}
</style>
</head>

<body>
<div href="#">
    <a class="c1"></a>
    <a class="c2"></a>
    <a class="c3"></a>
    <a class="c4"></a>
</div>
</body>
</html>

在这里插入图片描述

P_ning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.圆角外边框

圆角外边框<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> div{ width:500px; height:500px; border:2px #F0...
复制链接

扫一扫

专栏目录