Прозрачное пространство между div и границей с радиусом границы

Я пытаюсь получить что-то вроде этого:

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

не могу установить радиус границы контура с помощью этого:

.btn {
  outline: 1px solid #B54104;
  outline-offset: 1px;
}

промежуток между контуром и кнопкой непрозрачен:

.btn {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #c5170a;
}

Зазор между кнопкой и контуром смещения должен быть прозрачный.

что вы пробовали до сих пор?

— 17.12.2018 21:21

Пожалуйста, предоставьте CSS, который уже применен к этому.

— 17.12.2018 21:23

html css

17.12.2018 21:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

850

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать окраску фона, полагаясь на background-clip, чтобы избежать окрашивания части кнопки:

.button {
  display:inline-block;
  padding:3px; /*control the spacing*/
  width:100px;
  text-align:center;
  line-height:30px;
  border-radius:15px;
  color:#fff;
  border:2px solid orange;
  background: orange content-box; /*color only the content*/
}

body {
 background:pink;
}

<div class = "button">
button
</div>

Та же идея с использованием padding-box и контролем пространства с помощью границы:

.button {
  display:inline-block;
  width:100px;
  text-align:center;
  line-height:30px;
  border-radius:15px;
  color:#fff;
  border:5px solid transparent; /*control the spacing*/
  background: orange padding-box; /*don't color the border*/
  box-shadow: 0 0 0 2px orange; 
}

body {
 background:pink;
}