有趣的border-radius

最新推荐文章于 2024-05-23 15:17:44 发布

输出是最好的学习

最新推荐文章于 2024-05-23 15:17:44 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： border-radius html5

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.youkuaiyun.com/m0_37568521/article/details/75078693

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍如何使用CSS的border-radius属性创建各种有趣的形状。通过不同数值的组合，展示三个实例，包括特殊的圆角矩形和不规则图形。

提到border-radius。最常用的就是下面的用法：

border-radius:?px

如果只是单纯了设置4个角落的圆角，那么还没有发挥它最有意思的一面。我们先来看一下成果图

原谅笔者的审美，我只是为了表达通过圆角，我们其实还可以设计出很多好玩有意思的形状。具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			float: left;
			margin:20px;
		}
		.div1{
			width: 100px;
			height: 300px;
			border:1px solid red;
			border-top-right-radius: 0px 80px;
			border-top-left-radius: 80px 80px;
			border-bottom-left-radius: 50px 50px;
			border-bottom-right-radius: 50px 50px;
		}
		.div2{
			width: 200px;
			height: 300px;
			border:1px solid gray;
			border-top-right-radius: 150px 50px;
			border-bottom-left-radius: 150px 50px;
		}
		.div3{
			width: 300px;
			height: 300px;
			border:1px solid orange;
			border-top-left-radius: 150px 50px;
			border-top-right-radius: 150px 50px;
			border-bottom-right-radius: 50px 250px;
			border-bottom-left-radius: 150px 450px;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
</body>
</html>

代码比较简单，就不过多解释