CSS3之边框圆角：border-radius

最新推荐文章于 2022-01-30 20:39:37 发布

hu-flyyafly

最新推荐文章于 2022-01-30 20:39:37 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/u010028980/article/details/8738868

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习自《论道HTML5》

边框的圆角border-radius是CSS3最常用的属性之一，有了这个属性我们以后不再需要图片资源来实现边框圆角，它的格式如下：

[长度或百分比] ｛1，4｝[ / 长度或百分比｛1，4｝] ?

这个写法是标准的CSS3属性值描述语法，类似于常见的正则表达式。{1，4}表示1到4之间（包括1和4）的一个数字，“?”号表示0个或1个。

eg：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<style>
	#button{
		background-image:linear-gradient(top,#ECF2F6,#83BCF4);
		border:1px #5f88b7 solid;
		border-radius:4px;
		padding:8px 18px;
		font-size:15px;
	}
</style>
</head>
<body>
	<input type="button" id="button" value="圆角示例">
</body>
</html>

border-radius可以分解为4个属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

这4个属性可以来分别设置4个角的圆角。

border-radius有一个非常有趣的功能：实现各种圆形效果。

实现一个圆的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<style>
	#circle{
		width:100px;
		height:100px;
		border-radius:50px;
		background-color:#2ec8e9;
	}
</style>
</head>
<body>
	<input type="button" id="circle" value="Enter"/>
</body>
</html>

实现1/4个圆的代码如下：

width:100px;
height:100px;
border-bottom-left-radius:100px;
background-color:#2ec8e9;

实现1/8个圆的代码如下：

width: 0px;
border-left: 100px solid transparent;
border-top: 100px solid #2ec8e9;
border-top-left-radius: 100px;

hu-flyyafly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之边框圆角：border-radius

学习自《论道HTML5》边框的圆角border-radius是CSS3最常用的属性之一，有了这个属性我们以后不再需要图片资源来实现边框圆角，它的格式如下：[长度或百分比] ｛1，4｝[ / 长度或百分比｛1，4｝] ?这个写法是标准的CSS3属性值描述语法，类似于常见的正则表达式。{1，4}表示1到4之间（包括1和4）的一个数字，“?”号表示0个或1个。 eg：
复制链接

扫一扫