有趣的border-radius

深藏阁楼爱情的钟 2022-06-12 02:44 99阅读 0赞

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

border-radius:?px

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

![Center][]

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

<!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>

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

[Center]: /images/20220612/25358089d3ba4d21b3766e5cfbab0455.png

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关【有趣的网站】

致力于为开发者提供便捷、免费、稳定、快速的免费Web API数据接口服务。

た入场券/ 2024年05月06日 10:01/ 0 赞/ 32 阅读

相关有趣的网站汇总

学习git分支 [https://learngitbranching.js.org/][https_learngitbranching.js.org] 演示git命令效果

╰+攻爆jí腚メ/ 2022年10月02日 13:43/ 0 赞/ 168 阅读

相关有趣的小故事

1.心态父子二人看到一辆十分豪华的进口轿车。儿子不屑地对他的父亲说：“坐这种车的人，肚子里一定没有学问！”父亲则轻描淡写地回答：“说这种话的人，口袋里一定没有钱！

深藏阁楼爱情的钟/ 2022年08月09日 18:53/ 0 赞/ 181 阅读

相关 c++有趣的排序

题目：度度熊有一个N个数的数组，他想将数组从小到大排好序，但是萌萌的度度熊只会下面这个操作：任取数组中的一个数然后将它放置在数组的最后一个位置。问最少操作多少次

本是古典何须时尚/ 2022年06月14日 00:49/ 0 赞/ 147 阅读

相关 620. 有趣的电影

题目来源 [leetcode][] 题目描述某城市开了一家新的电影院，吸引了很多人过来看电影。该电影院特别注意用户体验，专门有个 LED显示板做电影推荐，上面公

﹏ヽ暗。殇╰゛Y/ 2022年03月12日 06:54/ 0 赞/ 181 阅读

相关有趣的对话框

有趣的对话框开发工具与关键技术 vs与jQuery 作者：戴怡斌撰写时间：2019年4月2日下面就来看一个简单的案列，输

╰半夏微凉°/ 2022年02月23日 09:16/ 0 赞/ 164 阅读

相关有趣的npx

在更新 npm 5.2.0 的时候发现会买一送一，自动安装了 npx。 npx 会帮你执行依赖包里的二进制文件,也就是说 npx 会自动查找当前依赖包中的可执行文件，

缺乏、安全感/ 2021年12月03日 08:01/ 0 赞/ 277 阅读

相关有趣的问题

有趣的问题求两个数的和求1+2+...+n 两个数相乘求两个数的和 include<bits/stdc++.h> usin

朴灿烈づ我的快乐病毒、/ 2021年11月09日 21:56/ 0 赞/ 315 阅读

相关 PTA：有趣的数

有趣的数（20 分） -------------------- 文章目录有趣的数（20 分） 1. 题目描述 2. 输入格式

雨点打透心脏的1/2处/ 2021年09月26日 15:26/ 0 赞/ 343 阅读

相关 CCF 有趣的数

一、题目 \\ 问题描述　　我们把一个数称为有趣的，当且仅当：　　1. 它的数字只包含0, 1, 2, 3，且这四个数字都出现过至少一次。　　2. 所有

Dear 丶/ 2021年06月24日 14:36/ 0 赞/ 478 阅读