当前位置:网站首页>Boder radius has four values, and boder radius exceeds four values
Boder radius has four values, and boder radius exceeds four values
2022-07-06 20:17:00 【imkaifan】
Problem description :
border-radius If it is 4 Value , In turn, it represents the upper left corner 、 Upper right corner 、 The lower right corner 、 The lower left corner .
But if you write it like this, it won't work ? border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;
boder-radius The role of
Back to the beginning ,css What did this magic wand do ?
CSS attribute border-radius Allows you to set the rounded edges of elements . When using a radius, determine a circle , When using two radii, determine an ellipse . This ( Ellipse ) The intersection of the circle and the border forms a fillet effect .
Even if the element has no border , Rounded corners can also be used background above , The specific effect is affected by background-clip influence
demo1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.myDiv {
display: flex;
flex-wrap: wrap;
width: 500px;
height: 500px;
border: 2px solid red;
border-radius: 125px 125px 125px 125px;
}
</style>
</head>
<body>
<div class="myDiv">
</div>
</body>
</html>
Code and schematic diagram above , Roughly know how to draw this trajectory
demo2:
border-radius To put it bluntly, you can draw an irregular figure , But we can know from the above , Irregularity is irregularity , But it must be round , Or right angles , Writing a negative value does not mean that it is an obtuse angle , Or sharp corners . Negative values are treated as 0
border-radius: 4px 3px 6px / 2px 4px;
/* Equivalent to : */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
border-radius: 25px 50px 70px 60px/50px 25px 10px 10px;
/* Equivalent to : */
border-top-left-radius: 25px 50px;
border-top-right-radius: 50px 25px;
border-bottom-right-radius: 70px 10px;
border-bottom-left-radius: 60px 10px;
border-radius: 25px 50px 70px 60px/50px 25px 10px 10px; The drawing is the above figure , Don't omit the eight values , Or you need to remember the corresponding relationship of missing values , Too annoying , So don't try to save trouble , Write the whole , Others can understand
边栏推荐
- 5. Wireless in vivo nano network: top ten "feasible?" problem
- 小微企业难做账?智能代账小工具快用起来
- Monthly report of speech synthesis (TTS) and speech recognition (ASR) papers in June 2022
- Node. Js: express + MySQL realizes registration, login and identity authentication
- JVM_ Common [interview questions]
- Tencent architects first, 2022 Android interview written examination summary
- [cloud native and 5g] micro services support 5g core network
- In unity space, an object moves around a fixed point on the sphere at a fixed speed
- AddressSanitizer 技术初体验
- Deep learning classification network -- zfnet
猜你喜欢
【GET-4】
腾讯T4架构师,android面试基础
22-07-05 七牛云存储图片、用户头像上传
Case ① | host security construction: best practice of 3 levels and 11 capabilities
爬虫(14) - Scrapy-Redis分布式爬虫(1) | 详解
[network planning] Chapter 3 data link layer (3) channel division medium access control
腾讯架构师首发,2022Android面试笔试总结
持续测试(CT)实战经验分享
B-jiege's tree (pressed tree DP)
Tencent byte Alibaba Xiaomi jd.com offer got a soft hand, and the teacher said it was great
随机推荐
技术分享 | 抓包分析 TCP 协议
Guangzhou's first data security summit will open in Baiyun District
Catch ball game 1
Tencent Android development interview, basic knowledge of Android Development
Groovy基础语法整理
腾讯字节阿里小米京东大厂Offer拿到手软,老师讲的真棒
Period compression filter
Tencent T3 Daniel will teach you hand-in-hand, the internal information of the factory
Continuous test (CT) practical experience sharing
Wonderful coding [hexadecimal conversion]
Le lancement du jupyter ne répond pas après l'installation d'Anaconda
A5000 vgpu display mode switching
5. Nano - Net in wireless body: Top 10 "is it possible?" Questions
recyclerview gridlayout 平分中间空白区域
Tencent T2 Daniel explained in person and doubled his job hopping salary
Ideas and methods of system and application monitoring
Problems encountered in using RT thread component fish
AddressSanitizer 技术初体验
数字三角形模型 AcWing 1018. 最低通行费
Unity making plug-ins