初学HTML5——CSS3圆角边框

最新推荐文章于 2022-11-05 12:23:00 发布

lxl。。

最新推荐文章于 2022-11-05 12:23:00 发布

阅读量2.8k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/lxl513513/article/details/105137940

版权

HTML5 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

border-radius属性

CSS3的圆角边框实际上是矩形的四个角分别做内切圆，然后通过内切圆的半径来控制圆角的弧度
CSS3的圆角边框使用border-radius属性来实现，

1.基本语法如下所示：

 border-radius：1-4 length|% / 1-4 length|%；

2.属性解释

length：用于设置对象的圆角半径长度，不可为负值

如果“/”前后的值设置其水平半径，“/”后面值设置其垂直半径
如果没有“/”，则表示水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置
如果省略bottom-left，则与top-right，bottom-left的顺序来设置
如果省略bottom-left，则与top-right相同
如果省略bottom-right，则与top-left相同，如果省略top-right，则与top-left相同

3.其他写法：

border-radius是一种缩写的方式，其实border-radius和border属性一样，可以把各个角单独拆分出来，如下：

border-top-left-radius:<length><length>//右下角
border-top-right-radius:<length><length>//左下角
border-bottom-left-radius:<length><length>//右下角
borderbottom-right-radius:<length><length>//右下角

4.示例如下：

<!DOCTYPE html>
<html>
<head>
<style> 
*{
	padding:0;
	margin:0;
}
#one
{
	width:400px;
	height:400px;
	background:rgba(0,100,255,0.5);
	border-radius:50%;
	float:left;
	position:fixed;
}
#two {   
     float:left;
     width:100px;
     height:100px;
     background:white;
     border-radius: 50px;
	 position:fixed;
	 left:150px;
	 top:150px;
}
</style>
</head>
<body>
	<div id="one"></div>
	<span id="two"></span>
</body>
</html>

5.效果如下：

在这里插入图片描述

lxl。。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
初学HTML5——CSS3圆角边框

border-radius属性CSS3的圆角边框实际上是矩形的四个角分别做内切圆，然后通过内切圆的半径来控制圆角的弧度CSS3的圆角边框使用border-radius属性来实现，1.基本语法如下所示： border-radius：1-4 length|% / 1-4 length|%；2.属性解释length：用于设置对象的圆角半径长度，不可为负值。...
复制链接

扫一扫