У меня есть строки эскизов в <div>
с small margin/border/padding set
. Я хотел бы добавить класс 'focus'
чтобы выделить один миниатюру на странице во время перехода CSS, то есть 'div.thumb.focus'
Есть ли какой-нибудь простой CSS-трюк для обертывания рамки вокруг 'div.thumb'
БЕЗ повторного позиционирования div.thumb
на странице?
Все div.thumbs абсолютно расположены внутри контейнера. И я хочу, чтобы фрейм был THICKER, чем margin/padding
между div.thumb
. Он может жить на более высоком z-index
и частично покрывать соседние большие пальцы, пока события щелчка читают div.thumb.focus
. Приемлемо простое решение JQuery.
// using LESS syntax
.container {
position: relative;
.thumb {
&.focus {
<need help here>
}
top: @top;
left: @left;
position: absolute;
margin: @margin;
padding: @padding;
img {
width: @width;
height: @height;
}
}
}
Несколько соображений приходят на ум (а не Bootstrap):
Использование лучшей модели коробки, но это может повлиять на ваше дополнение:
box-sizing: border-box
border: 10px solid red
Или используя тень твердой вставки, которая будет выглядеть как граница:
box-shadow: inset 0 0 0 10px red
Вы можете использовать контур, но он будет переполняться вне коробки, не затрагивая его размеры:
outline: 10px solid red
Теперь я не слишком хорошо знаком с LESS, поэтому я только что сделал это в обычном CSS.
Есть несколько вариантов, которые вы могли бы выбрать.
Добавить отрицательную маржу
.thumb.focus{
margin-top: -4px;
margin-left: -4px;
border: 4px solid blue;
}
Однако это может оказаться неприемлемым для вашего случая, так как у вас уже установлен запас. Это может быть полезно для других.
Добавить тень
.thumb.focus{
box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}
Это может работать хорошо, но не если вы хотите, чтобы несколько цветов/толщин с некоторых сторон.
Использовать размер окна
.thumb.focus{
box-sizing: border-box;
border: 4px solid blue;
}
Основная проблема с этим - поддержка браузера.
Использовать контур
.thumb.focus{
outline: 4px solid blue;
}
У меня такая же проблема, как и явная тень.
box-shadow: inset 0 0 0 5px red