元素圆角border-radius50% ~ 100%效果值

最新推荐文章于 2024-05-31 14:44:29 发布
最新推荐文章于 2024-05-31 14:44:29 发布
阅读量458 收藏
点赞数
分类专栏： 前端学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45967614/article/details/108186479
版权

**为什么border-radius50% ~ 100%效果一样呢？ **

重合曲线的规范：如果两个相邻的角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。

比如：如果将border-radius设置为60% 或80% 或 100%，则两个相邻圆角合起来就是120% 或160% 或 200%，![在
超过了对应盒子的边的长度，浏览器会重新计算保证他们不会重合并且同时缩放两个相邻角的半径直到他们可以刚好符合盒子，即两个相邻圆角就会变成50%。
在这里插入图片描述

故border-radius50% ~ 100%效果一样！

李小靓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
09-25
border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。
CSS3的Border-radius轻松制作圆角
01-19
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，具体实现过程我就不在多讲，只看方法就知道烦死人。 如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了，首先制作圆角图片的时间是省了，而且其还有多个优点：其一减少网站的维护的工
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS Code复制内容到剪贴板 -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px;   然而，今天我们不关心前缀，只简单坚持官方形式：border-radius。 如你所料，我们可以为每个角指定不同的值。 CSS C
Echarts 饼状图 基础图形
dandelion_lu的博客
10-15 740
1.效果图 2.代码 <div id="main" style="width:800px;height:800px"></div> var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { ...
HTML中border-radius: 50% 和 100%的区别
Seike_113的博客
01-04 733
因此，50%和100%的区别就是，50%边框四个角变成了半圆形，100%边框四个角变成了完整的圆形（圆角的半径都被设置为了 100%，或者相邻的角长度合起来超过了原形状的半径，浏览器会重新计算，保证圆角能够刚好适应原图形。圆形通常我们都是用 border-radius 属性来实现：先画一个方形，然后将它的 border-radius 设置成50%，但是有时候有的人会用 border-radius: 100%来实现。那么这两者的区别是什么呢？
border-radius; 关于圆角数值设定的问题
X_JS612的博客
06-28 1245
 CSS3 的 border-radius属性，可以通过指定数值或者百分比确定四个圆角的长短轴。共可以设置8个数值，（水平方向）左上，右上，右下，左下 ／ （竖直方向）左上，右上，右下，左下。而设置数值理论上没有大小限定，所以可以设置大于边框width, height的数值，但也同时会造成四个圆角的形状难以控制。例如，边框 width: 400px; height: 200px; 设置样式： bo...
css怎么设置元素为圆角,给元素设置圆角半径的css属性是什么
weixin_39621044的博客
08-03 1072
给元素设置圆角半径的css属性是border-radius，该属性可以设置元素的外边框圆角，只需要给指定元素添加“border-radius: 圆角值;”代码样式即可实现圆角效果。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。给元素设置圆角半径的css属性是border-radius。border-radius属性可以设置元素的外边框圆角；使用...
html中百分比的使用,html – CSS – 如何在`border- *`属性中使用百分比？
weixin_39685697的博客
06-11 214
我有使用Twitter Bootstrap 3的代码,使用右箭头导航,我使用border- *属性创建.但是,如果我在右箭头中使用非常长的文本,它不会扩展,如果我使用百分比,代码将无法正常工作……A long long textSmall textA long long long long long long long long long textSmall text 111.custom-nav...
【前端小技巧】border-raduis小技巧
weixin_34279579的博客
04-17 262
定义 border-radius: length|% (可以设置宽度／百分比); border-radius: 1-4 length|% (四个角：左上，右上，右下，左下 即顺时针方向); border-radius: 1-4 length|% / 1-4 length|%(水平方向／垂直方向); 特性 1.当任意两个相邻圆角的半径之和...
border-radius:50%和100%的区别
热门推荐
这个昵称没有被占用吧的博客
12-17 1万+
在使用border-radius时，发现有些人使用50%，有些人使用100%，都可以得到一个圆，那这两个值到底有什么区别呢： border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比。 如一个50px 150px的方形，如果border-radius设置为100%，则等价于： border-radius: 50px/150px; 而border-radius又是由border...
IE系列不支持CSS的圆角border-radius等属性的解决方案
01-21
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？ 一种比较传统的方案是放弃CSS3，使用背景图，但是这种...
圆角border-radius （实现圆（椭圆 胶囊 半椭圆） 和 三角形） 以及源码分析
qq_45288176的博客
06-16 1563
二 实现三角形三：特殊图形（实例分析） 背后红色背景怎么设置 ？上半部分为矩形 下半部分为下半椭圆形
CSS3之边框
前端_大可爱的博客
07-06 154
文章目录CSS3 圆角边框 border-radius1 2 3 4个值水平 垂直（X轴 Y轴）单个属性边框阴影 box-shadow边框图片 box-image CSS3 圆角边框 border-radius 1 2 3 4个值 border-radius: 20px 60px 100px 140px; /*从左上开始，顺时针赋值*/ border-radius: 20p...
【CSS3】边角 border-radius
iuukai
07-20 1547
1. border-radius 是一个复合（简写）属性 边类型样式都有上右下左边之分，唯独边角不同，它以左上、右上、右下、左下之分；换句话说，即，代表着边的两端。 border 是 border-top、border–right、border-bottom、border-left 的简写；border-radius 则为 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left
border-radius 构建规则讲解 及 50% 和 100% 的异同
KEEP RUNNING的博客
03-09 5625
参考：MDN border-radius 1. 用途：为边框设置圆角，若无边框，则会作用到背景上。 2. 设置原则： 若为一个值，则用其为半径构建圆形，这个圆与边框的交集形成圆角效果。 若为两个值，则用两个值分别为半长轴、半短轴构建椭圆，这个圆与边框的交集形成圆角效果。 3. radius的值是百分比，就相当于盒子的宽度和高度的百分比。 例1 盒子宽高都为100px。border-top-left-radius：50% 就相当于用50px作为半径构建圆形，此圆形与上左边框的交集，形成圆..
border-radius 50%和100%的区别
happyYYhy的博客
03-03 708
border-radius:150px/10px  表示水平方向的圆角半径为150px，垂直方向的半径为10px，如果只有一个参数，则水平和垂直方向的圆角半径是一样的。 是一个 150px x 150px 大小的方形，将它的四个角的半径都设置成 50%。根据 W3Cborder-radius 的规范定义，如果border-radius 的值是百分比的话，就是相对于 border bo
CSS实现一个雨滴滑落效果
云加速
05-28 1264
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 351
垂直居中的几种写法
CSS 空间转换 动画
最新发布
qq_67140973的博客
05-31 286
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
border-radius: 50%;border-top-left-radius: 50%;border-top-right-radius: 50%;border-bottom-right-radius: 50%;border-bottom-left-radius:
07-22
border-radius属性用于设置元素的圆角，而border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性用于分别设置元素的四个角的圆角半径。 当设置border-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值