Как сделать обводку другого цвета с прозрачностью?

Question

[Роман]

Здравствуйте
Необходимо сделать логотип (в прикрепленном).
Как правильнее сделать? как я понимаю, лучше сверстать. возникла проблема с серой обводкой. если делать через border, то при указании прозрачности вылазит background самого блока.
Также вопрос про background блока. Я вырезал из photoshop один квадратик и опять же поставил его как изображение на background. правильно ли это?
Спасибо

Answer 1

[Сергей delphinpro]

возникла проблема с серой обводкой. если делать через border, то при указании прозрачности вылазит background самого блока.

background-clip: padding-box; 
/* или content-box, по умолчанию стоит border-box */

Answer 2

[Олег]

Шрифт сам подберешь) https://jsfiddle.net/joomla/fduzLu06/1/

Answer 3

[trushka]

Вариант 1: background-origin: padding-box
Вариант 2: делаешь обводку с помощью box-shadow: 0 0 0 10px rgba(...)
Сеточку можно linear-gradient'ами, типа

background:
 linear-gradient(to left, #000, #000 1px, transparent 1px) center/10px 10px repeat,
 linear-gradient(to top, #000, #000 1px, transparent 1px) center/10px 10px repeat #aaa

Answer 4

[Илья]

А что нельзя просто вставить логотип картинкой как есть с иллюзией прозрачности?