css样式border-radius学习-画出水滴

最新推荐文章于 2024-05-18 16:41:40 发布

小码农吗

最新推荐文章于 2024-05-18 16:41:40 发布

阅读量1.8k

点赞数

分类专栏：日常栏目

本文链接：https://blog.csdn.net/qq_42818496/article/details/113412081

版权

css

日常栏目专栏收录该内容

81 篇文章 4 订阅

订阅专栏

😁 作者：Teddy (公众号：鸡仓故事汇)

⏰ 时间：2021-01-30 09:24:14

☁️ 天气：多云转晴

一、文件需求

1. 创建一个html页面

完整代码----有惊喜哦！

二、实现

创建html网页写出5个div 分别为：

<body>
	<h1>玩转border-radius，带你画图</h1>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
</body>

下面开始写css样式：

body {
	text-align: center;
	margin-top: 10%;
}
div {
	display: inline-block;
	width: 3.75rem;
	height: 3.75rem;
	margin-left: 2%;
	background-image: -webkit-linear-gradient(bottom, lightblue, lightcoral, rgb(48, 12, 231));
}
.div1 {
	border-radius:48% 53% 51% 49% / 42% 56% 0% 56% ;
}
.div2 {
	border-radius:48% 53% 51% 2% / 56% 55% 0% 43% ;
}
.div3 {
	border-radius:100% 0% 51% 48% / 57% 0% 100% 43% ;
}
.div4 {
	border-radius:32% 0% 100% 100% / 1% 100% 100% 100% ;
}
.div5 {
	border-radius:41% 58% 0% 100% / 45% 100% 0% 61% ;
}

大功告成！看效果。。。

ok！到这里就大功告成，小编（Teddy）在这里先感谢大家的到来。
虽然不是太详细，小编已经很努力，给小编来个一键三连(点赞，关注，收藏)，小编会越来越努力。。。

小码农吗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css样式border-radius学习-画出水滴

带大家把自己的个人网站背景升级话不多说直接上核心一、文件需求1. 创建一个html页面二、实现创建html网页写出5个div 分别为：<body> <h1>玩转border-radius，带你画图</h1> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <.
复制链接

扫一扫