CSS3 border-radius妙用

andycall 发布于2019-08-29 15:25 / 1461人阅读

摘要：分解出来就是以左上角为例子小例子属性允许您为元素添加圆角边框效果总结可以用画一些复杂的效果图，下面链接大神画的小猪佩奇，真是无所不能。

border-radius：左上 右上 右下 左下（就是顺时针）
如果没有4个值的情况下，缺的那个角的值与对角相等（如2、3、4）

1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;)
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

2、border-radius: 2em 10em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 10em;

3、border-radius: 2em 10em 5em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 10em;

4、border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

重点来了，最后一种用法
如图：

例子2：
border-radius: 2em 1em 4em / 0.5em 3em;
补齐4个角就是 border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
每一个角有2面，比如说左上角，有个top面和一个left面。
分解出来就是：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
以左上角为例子：

小例子：




 
 




border-radius 属性允许您为元素添加圆角边框！

效果：

总结：可以用css画一些复杂的效果图，下面链接大神画的小猪佩奇，css真是无所不能。
链接描述

混合云超融合服务器 border-radius css3 css3气泡 css3动画

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

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

【css3学习系列】之box-shadow,radial-gradient,linear-gradi

摘要：不在指定渐变区域的，以距离其最近的颜色填充。设置渐变为从右到左。这是默认值，等同于留空不写。最后奉上一碗纯拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

LdhAndroid 2019-08-30 15:45 评论0 收藏0
CSS border属性--妙用

摘要：在下实现圆角效果由于兼容性特别差，所以要在低版本浏览器下实现圆周角效果特别难利用的效果可实现如下图所示的圆效果代码简单如下制作三杠效果其实就是利用特性变色我们在做如下图标时，一般情况下时会有三处变色但是利用继承自这一特性在ie下实现圆角效果（由于border-radius兼容性特别差，所以要在ie低版本浏览器下实现圆周角效果特别难）利用border-style的dotted效果可实...

heartFollower 2019-08-29 12:54 评论0 收藏0
CSS3 border-radius 属性

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

geekzhou 2019-08-30 15:53 评论0 收藏0
可视化效果(Visual effects)

摘要：一般地，一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下，元素不会被裁剪。在闭合路径内的内容会显示，而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地，一个块盒的内容都被限制在该盒的content边内。某些情况下，一个盒可能会溢出，意味着它的部分内容或者全部内容位于该盒外部，例如：一行无法拆分，导致行盒比...

JowayYoung 2019-08-29 12:37 评论0 收藏0
CSS3 border-radius 圆角

摘要：但是深入一下，还是很有讲究的。问题，宽高皆为，，这个是怎么工作的换成，，甚至会有什么反应答等于一个的正方形，然后用半径为的圆来过渡边角，如果要在大脑中有动态的效果的话，不妨如下图来理解，更加方便。圆角border-radius，其css如下 IE9+支持（就是ie6,ie7,ie8都不支持），默认值是0，不继承，可以像下面那样设置4个角的值，也可以单独设置，如 border-top-left...

geekzhou 2019-04-23 11:57 评论0 收藏0