boder-radius四个值的问题，boder-radius超出四个值的问题

问题描述：

border-radius后面如果是4个值的话，依次代表的是左上角、右上角、右下角、左下角。

但是如果这样写是不是整不会了？ border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;

boder-radius的作用

回到最初的起点，css的这个魔法棒究竟干了些什么？

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响

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>

代码和上述示意图，大致知道这个轨迹怎么画出来了吧

demo2：

border-radius说白了就是可以画出一个不规则图形，但是通过上述基本也就知道了，不规则是不规则，但是一定是圆润，要么就是直角，写负值也不会说就是钝角了，或者锐角了。负值会被当作0

border-radius: 4px 3px 6px / 2px 4px;/* 等价于： */
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;/* 等价于： */
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; 画出的图就是上图，八个值别省略，要不对于缺少值的对应关系还需要记，太烦人，所以就别图省事，写全，别人也好理解

boder-radius四个值的问题，boder-radius超出四个值的问题相关推荐

lua 调用文件中的函数调用_四、C++获得Lua的变量和Table的值
上两篇文章都已经把Lua和C++函数的调用讲完了,这篇开始讲变量和Table的调用. 这篇文章主要是讲C++怎么调用获得Lua中的变量和Table的值,并且把lua中的值打印出来. 一.直接上代码: ...
python实现将文件内容按照某一列内容的大小值重新排序_Python数据分析入门教程(四)：数值操作...
作者 | CDA数据分析师我们把菜品挑选出来以后,就可以开始切菜了.比如要做凉拌黄瓜丝,把黄瓜找出来以后,那就可以把黄瓜切成丝了. 一.数值替换数值替换就是将数值A替换成B,可以用在异常值替换处理 ...
四、数据预处理——处理连续型特征：二值化与分段
四.数据预处理--处理连续型特征:二值化与分段点击标题即可获取文章相关的源代码文件哟! - sklearn.preprocessing.Binarizer 根据阈值将数据二值化(将特征值设置为0或1 ...
区块链 01(简化后的区块包括父区块哈希值、数据、时间戳、哈希值这四个字段，区块的哈希值由父区块哈希值、数据、时间戳、3个字段拼接通过哈希算法计算而成)
"""区块包括区块头和区块体两个部分.区块头由版本.父区块哈希值.数据.Merkle根.时间戳.目标难度. #Nonce值组成:区块体实际上可以包含任何内容,在比特币中包 ...
python计算1的平方减2的平方加3的平方减4的平方怎么算_已知X的平方加4x减一等于零求2x的四次方加八X的三次方减四X的平方减八X加一的值...
已知X的平方加4x减一等于零求2x的四次方加八X的三次方减四X的平方减八X加一的值以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来 ...
python修改类的属性值_python 四种方法修改类变量，实例对象调用类方法改变类属性的值，类对象调用类方法改变类属性的值，调用实例方法改变类属性的值，直接修改类属性的值...
三种方法修改类变量,实例对象调用类方法改变类属性的值,类对象调用类方法改变类属性的值,调用实例方法改变类属性的值,类名就是类对象,city就是类变量, #coding=utf-8 class empl ...
Double值保留两位小数的四种方法
public class DoubleTest {//保留两位小数第三位如果大于4会进一位(四舍五入)double f = 6.23556;/***使用精确小数BigDecimal*/public v ...
json字符串转换成json对象，json对象转换成字符串，值转换成字符串，字符串转成值...
json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值原文:json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值主要内容: 一 ...
Python面试总结（四）ip正则与三次握手四次挥手
1.请简述值传递和引用传递的区别? 值传递仅仅传递的是值引用传递,传递的是内存地址,修改后会改变内存地址对应储存的值. 2.请手写一个匹配ip的正则表达式? 第一种方法: ((2[0-4]\d|25 ...
java中数字作为布尔值_day50 java Script 数字和字符串布尔值和数组运算符条件判断和三元运算...
上节回顾: day501.前情回顾 CSS属性: float浮动的规则1. 浮动规则: 浮动只控制自己如果前面的标签也是浮动的,就挨着放如果前面的标签不浮动,则下方摆放如果把块级标签设置成浮动, ...

boder-radius四个值的问题，boder-radius超出四个值的问题

问题描述：

boder-radius的作用

boder-radius四个值的问题，boder-radius超出四个值的问题相关推荐

最新文章

热门文章