HTML / CSS - окружающий прямоугольник внутри div?

Question

HTML / CSS - окружающий прямоугольник внутри div?

0

пользовательский интерфейс, который я реализую, состоит из нескольких "ящиков", организованных в несколько строк.

Ширина окна изначально W (скажем, 100px), но пользователь может изменить его на кратность W В принципе, если первая строка имеет три коробки шириной W а вторая строка имеет один квадрат шириной 3 3W то все выравнивается идеально (т.е. Правая сторона первой строки находится чуть выше правой стороны второй строки).

В настоящее время я реализую поведение, выбираемое для выбора: когда пользователь нажимает на определенное поле, я хочу/должен дать визуальную индикацию, что это поле является "выбранным в данный момент". Этот признак должен быть прямоугольником, который окружает коробку с определенным цветом, стилем.

Я попытался реализовать это используя border: 5px; border-color: black; border-style: solid; border: 5px; border-color: black; border-style: solid; но это заставляет прямоугольник появляться за пределами коробки, тем самым нажимая его соседи по 5 пикселей в каждом направлении, как показано здесь: http://jsfiddle.net/4z8LN/1/

В частности, в этом примере из-за черной рамки мы имеем (a) вертикальный зазор между двумя строками; и (b) правая сторона C_1_0 (светло-зеленая) не выровнена с правой стороны C_0_2 (светло-голубой).

Есть ли CSS/HTML-обман, чтобы граница появилась в области div?

Itay Maman 01 янв. 2014, в 10:45

Источник

Теги:

html

css

4 ответа

1

Используйте тень вставки для вашего div.selected как: box-shadow: 0 0 0 2px black inset;

http://jsfiddle.net/BRwG3/

Harry 01 янв. 2014, в 08:24

1

Используйте box-shadow вместо border. Ящик-тень не увеличивает ширину и/или высоту вашего div, как это делает граница.

как

.class {
    box-shadow: 0 0 0 5px black;
}

CRABOLO 01 янв. 2014, в 07:20

0

Использование box-shadow http://jsfiddle.net/4z8LN/3/show/

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=#000)";/*IE 8*/
-moz-box-shadow: inset 5px 5px 0px #000, inset -5px -5px 0px #000;/*FF 3.5+*/
-webkit-box-shadow: inset 5px 5px 0px #000, inset -5px -5px 0px #000;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
box-shadow: inset 5px 5px 0px #000, inset -5px -5px 0px #000;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=#000); /*IE 5.5-7*/

VenomVendor 01 янв. 2014, в 08:26

Ещё вопросы

user3117575 · Accepted Answer · 2014-01-01T08-26-00.000Z

Добавляя пример к codehorse, если вы не хотите, чтобы эффект перекрытия на теневой коробке можно было также использовать вставкой, например:

.class {
   -moz-box-shadow: inset 0 0 0 5px black;
   -webkit-box-shadow: inset 0 0 0 5px black;
   box-shadow: inset 0 0 0 5px black;
}

http://jsfiddle.net/XeroElixir/w6uJp/

Затем, чтобы избавиться от текста, коллидирующего с вставкой, добавьте пробел:

.class p {
  padding: 5px;
}

Пример без вставки:

Пример вставки (и с текстом)

@codehorse Заполнение было применено к элементу "p" с ним, смотрите это как объяснение: jsfiddle.net/xa64Z