Как создать ограничивающую рамку с помощью css?

#html #css #vue.js

Вопрос:

Я новичок в 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;
    }

И то, что я хочу сделать, это создать ограничивающую рамку 32 пикселей для этого флажка, эта ограничивающая рамка должна быть аналогична в viewbox svg
Вы можете увидеть сетку значков и правила здесь. Давайте предположим, что центральная точка находится там, где должен быть флажок, а затем у них есть ограничивающая рамка (синий прямоугольник).

1. Можете ли вы привести пример того, чего вы пытаетесь достичь? Может быть, образ? Прямо сейчас вы могли бы получить ответы в самых разных направлениях

2. @fditz да, только что отредактировал мой вопрос.

3. Все еще трудно понять ваши намерения. Не могли бы вы предоставить желаемый результат?

4. Я думаю, что то, на что вы ссылаетесь, называется «наложением». Поэтому вам нужно что-то, что накладывается на другие компоненты с некоторой прозрачностью. Это правда? Вам нужно общее решение или что-то конкретное для вашего компонента? (конкретика, конечно, проще)

5. @konekoya У меня не было набора для дизайна, но это может быть «наложение», как сказал фдиц.

Ответ №1:

Хорошо, вот, надеюсь, что-то, что, по крайней мере, направит вас по вашему пути:

Если у вас есть объект-оболочка, вы можете поместить выбранный вами элемент внутрь и создать элемент «наложение» :

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