时间戳

首页 > 解决方案 > CSS边框笔划线帽圆角

html - CSS边框笔划线帽圆角

问题描述

我有一个带有无限旋转动画的 css 加载器，我想要圆角边框线帽，有什么技巧可以让边框线帽圆角吗？我试过stroke-linecap: round;但似乎只适用于 SVG，如何将其应用于 html 元素边框？

.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>

标签： htmlcss

解决方案

您可以将一些背景应用于伪元素：

.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 曲线

推荐阅读