有趣的border-radius

深藏阁楼爱情的钟 2022-06-12 02:44 132阅读 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 条评论，132人围观）

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

相关阅读

相关【有趣的网站】

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

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

相关有趣的网站汇总

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

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

相关有趣的小故事

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

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

相关 linux有趣的命令

1、yes命令，输出很多个y，可以用来对付选择很多y/n的应用。 2、banner命令，打印字符标题，就是用字符拼出大字来： ![2012111314095344.png]

末蓝、/ 2022年07月20日 15:26/ 0 赞/ 221 阅读

相关有趣的代码注释

``` /　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　瓦瓦　　　　　　　　　　　　十　　　　　　　　

古城微笑少年丶/ 2022年04月17日 04:35/ 0 赞/ 252 阅读

相关有趣的对话框

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

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

相关有趣的npx

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

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

相关有趣的问题

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

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

相关 PTA：有趣的数

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

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

相关 CCF 有趣的数

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

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