前端----HTML/CSS 圆角边框

最新推荐文章于 2024-05-23 00:00:00 发布

NO0b

最新推荐文章于 2024-05-23 00:00:00 发布

阅读量8.7k

点赞数 1

分类专栏：前端文章标签： CSS 圆角边框

本文链接：https://blog.csdn.net/q5706503/article/details/82825998

版权

前端专栏收录该内容

32 篇文章 3 订阅

订阅专栏

border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少

其实方法特别简单,css中的一个border-radius属性就够了

这个属性是CSS 3支持的

属性值是圆角的半径,半径越大,圆角的成都越大

方法如下:

boder-top-left-radius：30px； //左上角

boder-top-right-radius：30px； //右上角

boder-bottom-left-radius：30px； //右下角

boder-bottom-right-radius：30px； //左下角

如果这四个弧度的圆角相同，可以写成：

border-radius：30px；

border-radius：赋值的数量可以设置很多种不同的

一个参数就是上边的四个圆角弧度相同

border-radius：30px；

两个参数则第一个参数作为左上角,右下角圆角半径,第二个作为右上,坐下圆角半径

border-radius：30px 20px；

三个参数分别是左上 / 右上+左下 / 右下角的圆角半径

border-radius：30px 20px 10px;

四个参数的顺序是左上 / 右上/ 右下 / 左下的圆角半径(从左上开始顺时针)

border-radius： 40px 30px 20px 10px ;

我实验了一下4个参数的,代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" charset="utf-8">
	<style>
		div {
			width:200px;
			height:100px;
			border :2px solid red;
			border-radius :40px 30px 20px 10px ;
		}

	</style>
</head>
<body>
	<div/>
</body>
</html>

效果如下:

弧度区别不大可能看起来不明显,各位可以设置差别大一点

NO0b

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
前端----HTML/CSS 圆角边框

border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少其实方法特别简单,css中的一个border-radius属性就够了这个属性是CSS 3支持的属性值是圆角的半径,半径越大,圆角的成都越大方法如下:boder-top-left-radius：30px； //左上角boder-top-right-radius：30px； //...
复制链接

扫一扫