我们如何在不减少边界边缘的情况下将 border-top-radius 设置为 50%？
尼沙尔·卡雷尔
我希望在整个半圆中具有相同的边框宽度 px。
请参考以下图片附件：
#loader-frame {
height: 300px;
width: 300px;
position: relative;
background: #fff;
border-top: 3px solid #3498db;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
border-radius: 50%;
}<div id="loader-frame"></div>感谢您的任何帮助。
VXP
你可以让双方border-*-color transparent并使用transform: rotate()来对准它水平：
#loader-frame {
height: 300px;
width: 300px;
position: relative;
background: #fff;
border: 3px solid #3498db; /* modified */
display: flex;
/*flex-flow: row nowrap; by default*/
justify-content: center;
align-items: center;
border-radius: 50%;
/* added */
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotate(45deg);
}<div id="loader-frame"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在shinyApp中将border-radius设置为valueBox()？
- 2
如何在本机脚本中将border-radius设置为按钮？
- 3
将容器设置为 50% 宽度
- 4
在`hover`上-在不同情况下如何处理孩子`border-radius`？
- 5
如何使用CSS border-radius创建直角？
- 6
如何在WPF中为ToggleButton设置Border属性
- 7
将“ 50.0”设置为默认值，而不是“ 50”
- 8
border-radius和-webkit-border-radius之间的区别
- 9
Google Chrome Border Radius问题
- 10
根据兄弟姐妹的宽度动态设置CSS border-bottom-left-radius
- 11
为动态生成的 <td> 隐藏 border-top 属性
- 12
将margin-top设置为父元素高度的％
- 13
将top设置为auto时触发CSS过渡
- 14
无法使用 XLPagerTabStrip 将 TOP 边距设置为 buttonBarView
- 15
如何将border-radius属性与border-image一起使用以弯曲拐角？
- 16
为什么我的 div 在高度设置为 50% 时不显示，但在设置为 500px 时显示？
- 17
当我用border-radius聚焦输入时，会出现一个方形边框
- 18
为什么“ top”说我的机器只有50％空闲？
- 19
为什么将td border-radius应用于内容而不是边框
- 20
如何向下拉蚂蚁设计元素添加border-radius CSS属性？
- 21
如何删除所有以“border-radius”开头的行？（VS 代码）
- 22
border-radius在IE中创建轮廓
- 23
CSS border-radius：20px
- 24
字体真棒：Fa Bars-Border Radius
- 25
CSS过渡移除border-radius属性
- 26
如何在top命令中将内存使用情况排序设置为默认值？
- 27
无法将border-top和border-bottom应用于<tr>标记
- 28
Qt - 将 border-image 设置为 QPushButton 使其失去推送效果
- 29
如何在列数据类型为NON INTEGER的情况下添加NOT NULL约束（例如VARCHAR（50））
我来说两句