Nano Hash - криптовалюты, майнинг, программирование

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

Я пытаюсь добавить двойную рамку, используя border: 10px double red;, но как я могу контролировать толщину и расстояние между границами? Я хочу, чтобы граница имела толщину 1px. Если я просто изменю границу на 1px, границы будут перекрываться, и будет видна только одна граница. Я также пробовал с шириной границы 1px, но результат тот же.

Я также пытался использовать свойство border-spacing, но не смог заставить его работать.

Вот скриншот того, что я пытаюсь сделать: https://share.getcloudapp.com/JrugmEG2

Работающий jsfiddle: https://jsfiddle.net/7Lw21z85/

HTML:

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

CSS:

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  border: 10px double red;
  padding: 8%;
  outline: 15px solid #ffffff;
}
html css border border-spacing
29.10.2020

Ответы:


1

Вы можете использовать box-shadow для создания иллюзии двух границ вокруг элемента

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  padding: 8%;
  box-shadow: 0 0 0 1px #B38D6A, 0 0 0 5px #fff, 0 0 0 6px #B38D6A, 0 0 0 11px #fff;
}
<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

29.10.2020
  • Кажется, это решает проблему! Однако я не вижу, как изменить красный цвет? Я хочу использовать #B38D6A. Пытался преобразовать шестнадцатеричный код в HSL, но безуспешно :( 30.10.2020
  • Понятно! box-shadow: 0 0 0 1px hsl(29deg 32% 56%), 0 0 0 5px hsl(0deg 0% 100%), 0 0 0 6px hsl(29deg 32% 56%), 0 0 0 15px hsl(0deg 0% 97%); - Спасибо! 30.10.2020
  • Я обновил пример. Пожалуйста, ознакомьтесь с изменениями и отметьте ответ как полезный, если он вам поможет. 30.10.2020

    • 2

    Вы можете рассмотреть outline-offset

    .box {
  margin:15px;
  width:200px;
  height:100px;
  border:1px solid red;
  outline:1px solid red;
  outline-offset:9px;
}
    <div class="box"></div>

    29.10.2020

    3

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

    .container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.outer-box {
  background-color: white;
  border: 1px solid red;
  padding: 2%;
  outline: 5px solid #ffffff;
}

.middle-box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}

.box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}
    <div class="container">
<div class="outer-box">
<div class="middle-box">
   <div class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </div>
   </div>
   </div>
</div>

    29.10.2020
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..