CSS3 border-radius 圆角

geekzhou 发布于2019-04-23 11:57 / 957人阅读

摘要：但是深入一下，还是很有讲究的。问题，宽高皆为，，这个是怎么工作的换成，，甚至会有什么反应答等于一个的正方形，然后用半径为的圆来过渡边角，如果要在大脑中有动态的效果的话，不妨如下图来理解，更加方便。

圆角border-radius，其css如下

IE9+支持（就是ie6,ie7,ie8都不支持），默认值是0，不继承，可以像下面那样设置4个角的值，也可以多带带设置，如 border-top-left-radius:2em;

 1         /*border-radius:后面跟1个值、2个值、3个值、4个值时的情况*/
 2             /*1个值：四个角一样圆*/
 3                 border-radius:四个圆角一样的值;
 4 
 5             /*2个值，前:左上右下，后:右上左下*/
 6                 border-radius:左上角和右下角值  右上角和左下角值;
 7                 
 8             /*3个数值*/
 9                 border-radius:左上角值   右上角和左下角值   右下角值;
10                 
11             /*4个数值*/
12                 border-radius:左上角值   右上角   右下角值  左下角值;

上面每个圆角都是标准的圆形来过渡的角，也可以用椭圆，x轴和y轴的值不相等，前面x，后面y，如下，/ 前面都是各个角的水平方向值，/ 后面是各个角的垂直方向的值

1         div {
2             width: 300px;
3             height: 300px;
4             background: #FF9900;
5             /* /前面是圆角横向上的各个角的值   /后面是圆角竖向上的各个角的值  */
6             /* 利用横向和纵向不同，画个芒果  */
7             border-radius: 280px 30px 300px 80px / 270px 20px 300px 20px;
8         }

效果图如下：

-------------

这没什么难的，记忆一下即可。但是深入一下，还是很有讲究的。

问题1，div宽高皆为100px，border-radius:30px，这个30px是怎么工作的？换成50px，70px，甚至200px会有什么反应？

答：等于一个100px的正方形，然后用半径为30px的圆来过渡边角，如果要在大脑中有动态的效果的话，不妨如下图来理解，更加方便。

当圆角是30px的时候，效果如上，如果圆角为50px呢？各占用50px，则达到中间点了，变成一个圆了！如果div有边框10px呢，这border-radius为60px才是圆，如下图

如果border-radius为70px呢？明显，2个70是大于100的，这个角按70来画，另外一个角就不够用了

问题2，既然边框变圆了，形状改变了，面积改变了，那么对div里面的内容有什么影响呢？

答曰：视同不变！如下图

上面我们为了得到一个圆形，要担心有没有忽略padding，有没有忽略border-width，还要根据宽度值计算，唉！有个更简单的办法就是如下：

/*管它padding,border,width，有了这个值，正方形变成圆，长方形变成椭圆！！！是的，不用像素，用百分比 */
border-radius:50%;

GPU云服务器云服务器内凹圆角，css3 border-radius css3 css3气泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1395.html

“蝉原则”与CSS3随机多背景随机圆角等效果

摘要：那蝉原则对我们网页设计有什么启示呢那就是可以以最小成本实现更自然的随机效果。本文就演示两个借助蝉原则和特性实现随机效果的例子。一、什么是蝉原则？蝉原则，英文称作cicada principle，是一种让事物的重复出现符合自然随机性的规则，为什么这么说呢？蝉原则源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7...

crossoverJie 2019-04-23 13:44 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS3 边框

摘要：边框用，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如。在本章中，您将了解以下的边框属性圆角在中添加圆角棘手。 CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： border-radius box-shadow border-image CSS3 圆角在 ...

Charles 2019-08-29 13:25 评论0 收藏0
CSS魔法堂：重拾Border之——更广阔的遐想

摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...

lily_wang 2019-08-30 13:01 评论0 收藏0
CSS3 border-radius 属性

摘要：今天面试的时候，面试官问了一个属性参数的问题。使用属性，你可以给任何元素制作圆角。设置不同参数，也可以制作其他形状的角属性有四个值，分别对应图中位置圆角的半径。此时使用号隔离，号前表示水平半径，号后表示垂直半径，缺省值时表示含义同上。今天面试的时候，面试官问了一个border-radius属性参数的问题。当时记得不清楚，回去后便研究学习了一下。使用 CSS3 border-radiu...

geekzhou 2019-08-30 15:53 评论0 收藏0