Пограничное положение

Question

Я хочу попытаться добиться чего-то в CSS, используя границы, но у них, похоже, нет чего-то, что я хочу. В Photoshop, когда вы добавляете штрих (граница), вы выбираете позицию. Снаружи, внутри или в центре. Вне того, где вся граница обтекает объект. Внутри есть место, где он сидит внутри (очевидно), а центр - наполовину и наполовину.

Я хочу, чтобы граница 2px находилась в центре. Таким образом, он показывает 1px снаружи и 1px внутри. Есть ли способ сделать это с помощью CSS? Я предполагаю, что могу сделать это с box-shadow, но я ужасен в тени в CSS.

Существует также проблема того, чтобы быть чистым CSS, чтобы я не мог заложить изображение над ним. Может кто-то может помочь мне с этим.

Спасибо.

Answer 1

Там есть работа вокруг, так как border представляет внешний ход для вас, вы можете использовать outline CSS собственности с outline-offset набором для отрицательного значения иметь внутренний 1px удар ⁽¹⁾JS Fiddle

body { 
 
    padding-top: 10px; 
 
} 
 
#test { 
 
    width: 250px; 
 
    height: 200px; 
 
    background-color: orange; 
 
    margin: 0 auto; 
 
    border: 1px navy solid; /* outer stroke */ 
 
    outline: 1px navy solid; /* inner stroke */ 
 
    outline-offset: -2px; /* negative border width + outline width */ 
 
}

<div id="test"></div>

---

⁽¹⁾ Как выше скрипку не может продемонстрировать объяснения достаточно хорошо, вот тот же пример с двумя цветными мазками и 4px для каждого хода вместо 1pxDemo Fiddle

Ресурсы:

http://caniuse.com/#search=outline

https://developer.mozilla.org/en/docs/Web/CSS/outline-offset

http://www.w3schools.com/cssref/css3_pr_outline-offset.asp

https://davidwalsh.name/outline-offset

Answer 2

Возможно, с подходящим размером абсолютно позиционированный псевдоэлемент?

div { 
 
    box-sizing: border-box; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    margin: 1em auto; 
 
    position: relative; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top:-6px; 
 
    left: -6px; 
 
    width: calc(100% - 12px); 
 
    height: calc(100% - 12px); 
 
    border:12px solid rgba(255,0,0,0.5) 
 
}

<div></div>

Answer 3

Вы могли бы подтолкнуть контейнер таким образом, что это будет выглядеть как это внутренняя граница. Например, если у вас есть есть 2px левой границы и хочет, чтобы она появилась в качестве внутренней границы, вы можете просто компенсировать весь контейнер справа, как это:

position: relative; 
left: 2px; 

Вы могли бы сделать другие исправления, таких как уменьшение ширины контейнера на 2px.