CSS圆角 border-radius椭圆 / 正斜杠是什么？

css中各元素（如设置了height,width的块级元素；input输入框，又或者是图片img等等）所呈现出来的都是方体，方体即为四个角的图形。但可以通过 CSS border-radius 属性来实现任何元素的“圆角”样式。

还有这种椭圆。

如上述图1（左）来分析

代码如下

#picture1 {border-radius: 50px / 15px;background: #73AD21;padding: 20px; width: 200px;height: 150px;
}

上述代码为border-radius: 50px / 15px; 可以看到对于这种椭圆，在代码中使用的是50px 正斜杠 15px来实现的。

那么这个 / 代表是什么，是什么作用呢？

其实首先平时我们写的border-radius : 50px，完整的写法应该是：border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图

所以图1的代码border-radius: 50px / 15px;的完整写法为border-radius: 50px 50px 50px 50px / 15px 15px 15px 15px;

（如下图）可以理解为每一个角都是50px（水平半径）/15px（垂直半径），两种不同的值（弧度）来实现的不规则椭圆。自然四个角就是50px 50px 50px 50px / 15px 15px 15px 15px

不论是椭圆还是圆形，它所根据的是水平半径和垂直半径的值，根据这个给元素设置圆角的弧度。

所以一定要记住border-radius的完整写法，才能深刻的从根本上知道这“狡猾”的代码是怎么计算生成最终的图形样式的。

CSS圆角 border-radius椭圆 / 正斜杠是什么？相关推荐

js进阶正则表达式方括号（方括号作用）（js正则是在双正斜杠之中：/[a-z]/g）...
js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g) 一.总结方括号:范围圆括号:选大括号:数量 1.js正则是在双正斜杠之中: var reg2=/[a-z]/ ...
(正)斜杠与反斜杠
在 Windows 系统中,正斜杠/ 表示除法,用来进行整除运算:反斜杠\ 用来表示目录,例如:E:\学习资料\java\传智播客_2015年Java基础视频-深入浅出精华版\day11. 在 Uni ...
php 网址尾部带斜杠和不带区别,URL路径中带正斜杠/与不带的区别
简单理解:不带斜杠的URL结尾通常被服务器识别成独立文件,当它去查找这个文件缺失的时候,就会重定向到带斜杠的URL,这个时候带斜杠的URL,可以理解成为是目录. 解读URL结尾斜杠的产生: 举例: - ...
Python 基础篇-正斜杠(/)和反斜杠(\)的用法
今天为大家讲一讲正反斜杠的常见应用:一个就是路径里的应用,还有就是反斜杠在正则表达式里的不同. 路径上的应用首先告诉大家,用于路径上,python是不区分正("/")反(&quo ...
js将字符串中所有反斜杠\替换成正斜杠/
区分正斜杠与反斜杠: 正斜杠:http://.http紧跟着的斜杠,离手输入最近的斜杠,shift中间斜杠.45度角斜杠.正斜杠不需要转义反斜杠:回车与空格之间.程序表示时需要转义成\\. str. ...
文件路径最好使用正斜杠，使用反斜杠可能在unix系统中访问不到文件
<%@ page language="java" contentType="text/html; charset=GBK"pageEncoding=&qu ...
正斜杠( / )和反斜杠( \ )的区别
反斜杠"\"是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点.所以除了程序设计领域外,任何地方都不应该使用反斜杠. 如何区分正反斜杠英语:"/" ...
python右斜杠_Python中的左斜杠、右斜杠(正斜杠和反斜杠)
首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠,但是现在Wi ...
python的百分号和斜杠除_关于python：如何替换除字母，数字，正斜杠和反斜杠之外的所有字符...
想要解析文本并仅返回字母,数字,正斜杠和反斜杠,并用''替换所有其他斜杠. 是否可以仅使用一种正则表达式模式,而不是随后需要循环的几种正则表达式模式? 无法获取下面的样式,不能替换正斜杠. line1 ...

CSS圆角 border-radius椭圆 / 正斜杠是什么？

CSS圆角 border-radius椭圆 / 正斜杠是什么？相关推荐

最新文章

热门文章