укладка границы в css3 необычный дизайн

Question

Моя цель - получить такие эффекты с границами в чистом css. Я хочу спросить, возможно ли это (или мне нужно использовать изображения)? Должен ли я использовать такой атрибут span или контур или что-то еще? Может быть, вы знаете, что я могу найти учебник, как это сделать?

Answer 1

Другая возможность, которая не использует границы, но является чистым CSS, является некоторой дурацкой работой с псевдоэлементами.

Например:

p:after { 
    content: ''; 
    background-color: red; 
    position: absolute; 
    width: 20px; 
    left: 0; 
    top: -2px; 
    bottom: -2px; 
    z-index: -1; 
} 

Вы можете увидеть демо здесь: http://jsbin.com/iduvoj/1/edit

Вот еще одна демонстрация вашего последнего примера: http://jsbin.com/igotul/1/edit

Теперь это зависит от нескольких вещей, например, как многие элементы, которые вы будете укладывать, независимо от того, может ли ваш абзац иметь сплошной цвет фона и т. д. Но есть шанс, что он сработает.

Это также зависит только от :before и :after, которые достаточно хорошо поддерживаются: http://caniuse.com/#search=before

Answer 2

Это будет сложно.

Лучшее, что я могу предложить вам, используя границы, - это CSS border-image, что действительно позволит вам проектировать практически любые произвольные рамки. Вы можете узнать больше об этом on MDN.

Имеет то преимущество, что оно предназначено для обработки растягивающих изображений по длине границы и с отдельными изображениями для каждой стороны и углов и т. Д. По мере необходимости, поэтому оно очень гибкое.

Я не буду приводить пример, отличный от приведенных выше на странице MDN, потому что сам код CSS относительно прост; главное, что вам нужно, чтобы заставить его работать, будут фактические изображения, и это то, что вам нужно, чтобы обеспечить себя.

Однако основная проблема, с которой вы столкнулись с border-image, - это поддержка браузера. Это относительно недавнее дополнение к CSS, и некоторые довольно современные браузеры не поддерживают его. Это включает IE10. В зависимости от того, что вам нужно, это может сделать это как решение.

Таким образом, альтернативное решение, которое будет работать лучше кросс-браузера, - это просто, чтобы границы были определены как фоновые изображения. Это довольно очевидно, и на самом деле работает достаточно хорошо. Если ящики могут сильно различаться по высоте, вы можете получить проблемы с масштабированием, но этого можно избежать, используя несколько фоновых изображений.

Надеюсь, что это поможет.