有趣的border-radius

最新推荐文章于 2021-04-25 09:47:10 发布

输出是最好的学习

最新推荐文章于 2021-04-25 09:47:10 发布

阅读量295

点赞数

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

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

本文链接：https://blog.csdn.net/m0_37568521/article/details/75078693

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

提到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>

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

输出是最好的学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有趣的border-radius

提到border-radius。最常用的就是下面的用法：border-radius:?px如果只是单纯了设置4个角落的圆角，那么还没有发挥它最有意思的一面。我们先来看一下成果图原谅笔者的审美，我只是为了表达通过圆角，我们其实还可以设计出很多好玩有意思的形状。具体实现代码如下： Document div{ float: left; m
复制链接

扫一扫