CSS边框描边线帽四舍五入 [英] CSS border stroke line cap rounded
本文介绍了CSS边框描边线帽四舍五入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有无限旋转动画的css加载器，我希望边界线帽变圆，是否有任何技巧可以使边界描边线帽变圆?我尝试了 stroke-linecap:round; ，但似乎仅适用于SVG，如何将其应用于html元素边框?
I have a css loader with infinite spin animation, I want the border line cap rounded, Is there any trick to get the border stroke line cap rounded? I tried stroke-linecap: round; but seems only for SVG, How to apply it to the html element border?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="loader"></div>
</body>
</html>推荐答案
您可以通过将背景应用于伪元素来实现:
You can do it with some background applied to a pseudo element:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position:relative;
}
.loader::before {
content:"";
position:absolute;
width:100%;
top:0;
height:20px;
--rad:radial-gradient(circle 8px,#3498db 99%,transparent 100%);
background:
var(--rad) left -14px top 0,
var(--rad) right -14px top 0;
background-size:200% 100%;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}<div class="loader"></div>相关问题得到不同的想法:带圆角的CSS弯曲线
Related question to get a different idea: CSS curved line with rounded
这篇关于CSS边框描边线帽四舍五入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
