时间戳

首页 > 解决方案 > 如何使用css创建边界框？

html - 如何使用css创建边界框？

问题描述

我是 vue.js 的新手，我想问我可以为任何元素创建边界框吗？这个边界框看起来像svg 示例中的视图框，我将这个复选框设置为这个 复选框

这是制作复选框框的代码

/* checkbox aspect */
    [type="checkbox"]:not(:checked) + label:before,
    [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1.4em;
        height: 1.4em;
        border: 1px solid #aaa;
        background: #FFF;
        border-radius: .2em;
        box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
        -webkit-transition: all .275s;
                transition: all .275s;
    }

    /* checked mark aspect */
    [type="checkbox"]:not(:checked) + label:after,
    [type="checkbox"]:checked + label:after {
        content: '✕';
        position: absolute;
        top: .525em;
        left: .18em;
        font-size: 1.375em;
        color: #CB22ED;
        line-height: 0;
        -webkit-transition: all .2s;
                transition: all .2s;
    }

我想做的是为这个复选框创建 32px 的边界框，这个边界框应该类似于你可以viewbox在这里svg 看到图标网格和规则。让我们假设中心点是复选框应该在的位置，然后它们有边界框（蓝色矩形）。

标签： htmlcssvue.js

解决方案

好的，希望这至少能让您走上正轨：

如果你有一个包装对象，你可以把你选择的元素放在里面，然后放在一起一个“覆盖”元素：

<div class="wrapper">
  <div class="overlay"></div>
  <div class="content">I am a content</div>
</div>

现在只有 CSS，您可以将内容放置在内部，就像堆栈一样，其中覆盖层是最顶层的元素。为此，您可以使用该position属性。我在示例中使用了 flex 只是为了更好地定位东西。我还给了包装器一个固定的大小以更好地说明这个想法，但理论上它可以被忽略（在这种情况下，由于孩子的 100% 宽度，它会随着页面的长度增长......如果设置了父级的宽度会增长到 100%）

div.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 300px;
  height: 300px;
}

div.overlay{
  position:absolute;
  width: 100%;
  height: 100%;
  
}

div.overlay:hover{
  background-color: #0000FFAA; /*Transparency is controlled by the last two hex-numbers (AA in this case)*/
}

div.content{
  background-color: red;
}

当你用鼠标悬停时，它会显示覆盖（由于悬停规则），但如果你需要，你可以使用 Vue 属性或其他东西来控制它，并根据属性的设置方式隐藏/显示覆盖。

你可以在这个 jsfiddle 上看到结果：https ://jsfiddle.net/r4tfumqe/3/

推荐阅读