Прозрачный зазор между рамкой и фоном?

Question

[Sergey]

Всем привет.
Начал путь верстальщика )) и столкнулся с такой проблемой нужно как на фото сделать прозрачный фон. Один из вариантов нашёл на scss, но мне нужно на чистом css

Приложу пример на scss с codeopen


Пользуюсь моментом сразу задам второй вопрос из этого шаблона как сделать такой :hover



P.S.

По первому вопросу нашёл такой вариант НО НЕМНОГО НЕ ТО ЧТО ХОТЕЛОСЬ
Вообщем ...
Как я писал выше что нашёл похожий пример только в scss, нашёл конвектор с scss в css
Ссылка ТУТ

сам код после конвертации

html {
	 height: 100%;
	 background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg);
	 background-size: cover;
}
 div {
	/* relevant styles */
	 border: solid 0.125em;
	 border-image: linear-gradient(#be4c39, rgba(190, 76, 57, 0) 80%) 1;
	 padding: 0.125em;
	 background: linear-gradient(#e18728, rgba(225, 135, 40, 0) 80%) content-box;
	/* other styles */
	 margin: 0 auto;
	 width: 5em;
	 height: 3em;
	 color: white;
	 font: 700 1em comic sans ms, verdana, sans serif;
	 text-align: center;
}

и скрин

Comments

[Антон Литвиненко]

если вам этот вариант подходит то в блоке с scss справа стрелочка, тыцаете на нее и выбираете view compiled css, получатете

html {
  height: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg);
  background-size: cover;
}

div {
  /* relevant styles */
  border: solid 0.125em;
  border-image: linear-gradient(#be4c39, rgba(190, 76, 57, 0) 80%) 1;
  padding: 0.125em;
  background: linear-gradient(#e18728, rgba(225, 135, 40, 0) 80%) content-box;
  /* other styles */
  margin: 0 auto;
  width: 5em;
  height: 3em;
  color: white;
  font: 700 2em/2 comic sans ms, verdana, sans serif;
  text-align: center;
}