Нарисуйте границу сверху div

Question

Хорошо, я не могу объяснить, что мне действительно нужно, поэтому я покажу это.

Или ... если я дам ему попробовать со словами: мне нужна граница, НЕ вокруг DIV, НЕ что-то менять (ширина, высота, поля, обивка - ничего ...), так же, как если бы оно было обращено на вершине вышеупомянутая div ...

Пример:

CSS: (пристреливать элементы с атрибутом comp-id - граничила состояние устанавливается с msp-selected класса)

[comp-id] { 
    cursor:pointer; 
} 

[comp-id] .msp-selected, [comp-id] .msp-selected:hover { 
    border:2px solid red; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 

Я пытался с border, outline и box-sizing:border-box; но ни одна из вышеперечисленных не поддерживает макет.

Итак, ... Есть идеи, как это можно достичь?

---

UPDATE (Вот что box-sizing - да, все из них - делает):

Скажем, мы сначала выделить верхний элемент (добавить границу), а затем затем дно один - как вы можете заметить, граница делает влияет на макет (например, если он добавляет прокладку или sth) ...

Answer 1

Вы можете для этого используйте тень окна. Пример (jsFiddle):

box-shadow: inset 0 0 0 5px red; 

нарисует 5px красной рамки на внутреннем в DIV - без изменения положения, высоты и т.д. Также не забудьте добавить различные префиксы браузеров (например, -webkit-, -moz, -o-), я просто оставил их для простоты.

Edit: Преимущество по сравнению с border-box и outline, вы можете оживить его очень хорошо:

box-shadow: jsFiddle против border-box: jsFiddle

Answer 2

Box Тень со вставкой:

.box:hover {box-shadow: inset 0 0 0 5px red;} 

see the jsfiddle for further explaination

Answer 3

Вы нашли решение box-sizing:border-box;.Просто убедитесь, что вы включили -webkit и -moz-бокс для других браузеров, например:

div { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

принять в виду, что боксировать-проклейки это свойство CSS3 и не будет работать в IE7 и IE6.

Вот еще по теме: How CSS Box Model Works

Приветствия, Надежда, которая помогает вам.

Answer 4

http://jsfiddle.net/KGXYR/6/

div { 
    background: green; 
    width: 100px; 
    height: 100px; 
    outline: thick solid #00ff00; 
    outline-offset: -6px 
} 

outline

outline-offset

---

Update:

http://jsfiddle.net/XKAVF/

.box{ 
    width: 200px; 
    height: 100px; 
    background: #333; 
} 

.box:hover{ 
    outline: thick solid #00ff00; 
    outline-offset: -5px 
} 

Answer 5

CSS граница без, влияющие на рентабельность макетирование, Прокладки, ширина или высота:

div { 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    border: 10px solid transparent; 
} 

div:hover { 
    border: 10px solid red; 
} 

См my fiddle

Answer 6

Я не уверен, почему box-sizing не работает для вас, но, возможно, подделка его псевдоэлементом будет работать:

div { 
    background-color: #6af; 
    width: 10em; 
    height: 5em; 
} 
div:hover::before { 
    content:''; 
    display: block; 
    width: 100%; 
    height: 100%; 
    border: thick solid green; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

jsFiddle

Это интересная статья о псевдо-элементах: A Whole Bunch of Amazing Stuff Pseudo Elements Can Do