Wypełnienie na granicy div

Question

Chcę umieścić dopełnienie na granicy css. Wciągnij go do środka, z dala od krawędzi. Czy jest to możliwe przy użyciu css (css3 jest w porządku, webkit).

Oto projekt.

to zrobił umieszczając div wewnątrz div, a następnie podać granicy do wewnętrznej div. Chcę, aby markup był tak cienki, jak to możliwe, więc chcę użyć tylko jednego div, jeśli to możliwe.

Dziękuję.

Answer 1

Powinieneś być w stanie to zrobić za pomocą właściwości CSS Outline:

<style> 
.outer { 
     outline: 2px solid #CCC; 
     border: 1px solid #999; 
     background-color: #999; 
     } 
</style> 

<div class="outer"> 
example 
</div> 

Answer 2

Nie, to niemożliwe. Wypełnienie, margines i obramowanie to wszystkie elementy elementów, nie można nadać obramowania marginesu ani marginesu.

Może, jeśli zamieścisz przykład tego, co próbujesz zrobić, możemy wymyślić alternatywne rozwiązania?

-aktualizacja- Patrząc na twój przykład, obawiam się, że nadal nie jest to możliwe, przynajmniej nie z jednym divem. Nie jestem też fanem divitis, ale dodatkowy div prawdopodobnie jest najlepszą opcją w tym przypadku.

Answer 3

Wypełnienie krawędzi (która oddzieli ją od krawędzi) nazywa się "marginesem": w celu uzyskania dalszych szczegółów zobacz: Box model.

Answer 4

Niestety, bez dodawania kolejnego elementu div, nie sądzę, że można to zrobić za pomocą samego CSS.

Im bardziej skomplikowany jest Twój projekt, tym większe prawdopodobieństwo, że będziesz potrzebować dodatkowych znaczników html.

Twoja druga (także nieduża) opcja to tło obrazu lub jeśli w jakiś sposób sprawia, że ​​czujesz się lepiej, możesz dodać elementy strony klienta z JQuery, utrzymując w ten sposób "czystość" plików po stronie serwera.

Powodzenia.

Answer 5

Można to zrobić, tworząc wewnętrzny element div z pożądanymi obramowaniami i zewnętrzny element div z wyświetlaczem: tabelą. Coś takiego:

<style> 
    .outer { 
     background: #ccc; 
     display: table; 
     width: 400px; 
    } 

    .inner { 
     border: 2px dashed #999; 
     height: 50px; 
     margin: 5px; 
    } 

</style> 

<div class="outer"> 

<div class="inner"> 
</div> 

</div> 

Answer 6

Zamiast granic, można użyć własności Outline:

div{ 
height:300px; 
width:500px; 
background-color:lightblue; 
outline:dashed; 
outline-offset:-10px;  
} 

http://jsfiddle.net/H7KdA/