时间戳

首页 > 解决方案 > 是否可以在响应式微调器中具有与 CSS 中的父元素相关的动态边框宽度？

html - 是否可以在响应式微调器中具有与 CSS 中的父元素相关的动态边框宽度？

问题描述

基本上我一直在尝试实现一个简单的微调器类，它可以附加到任何元素，包括一个小按钮或整个页面。

除了视口值之外，我还没有找到一种方法来获得相对边框宽度。

它需要对我进行的基本测试是：

  1. 作为一个类在整个页面上看起来不错
  2. 在一个小按钮上看起来不错
  3. 移动办公
  4. 只需添加一个类即可在任何元素中使用，而无需更改其实际内容。
  5. 没有 Javascript

我也对更好看的加载器持开放态度，因为我是一个 css 初学者并且不知道我在做什么。

小提琴：http: //jsfiddle.net/ppgab/adfnc5tk/6/

到目前为止我所拥有的代码：

/*Spinner with overlay and no mouse events*/
@keyframes spinner {
    to {transform: rotate(360deg);}
}
.loading::before {
    position:absolute;
    content : '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 2;
    opacity: 0.65;
}
.loading:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    /*! height: 5rem; */
    margin-top: -12.5%;
    margin-left: -12.5%;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    animation: spinner .8s ease infinite;
    z-index:3;
    padding-top: calc(12.5% - 1em);
    border-width: 1em;
    padding-bottom: calc(12.5% - 1em);
}
.loading {
    pointer-events: none;
    cursor: wait;
}

.text-center {
  text-align:center;
}

标签： htmlcss

解决方案

面对响应border-width式我会使用 SVG，尽管在 SVG 的情况下它会是一个中风。

/*Spinner with overlay and no mouse events*/
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.loading::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  z-index: 2;
  opacity: 0.65;
}

.loading {
  pointer-events: none;
  cursor: wait;
}

.text-center {
  text-align: center;
}

svg {
  z-index: 2;
  width: 40vmin;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: spinner .8s ease infinite;
}
<div class="loading text-center">
<h1>
  Resize this window to see it in action !
</h1>
<h3>
But if you reduce the width too much it gets ugly :(
</h3>
<button>
 You can't click me!
</button>

</div>
  <svg viewBox="-50 -50 100 100">
    <circle r="46" fill="none" stroke="#07d" stroke-width="7" stroke-dasharray="72.26" stroke-dashoffset="-36.13" />
  </svg>

在 CSS 中，我使用了 width:width:40vmin;但如果您需要在按钮上使用它，您可能需要更改它。

推荐阅读