Две границы разной ширины с 3 сторон

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

border: double 4px black;
outline: solid 3px black;

любая помощь будет здорово

Почему бы не удалить контур и вместо этого создать вложенный элемент внутри элемента, который у вас уже есть, со вторым стилем границы, который вы хотите?

— 09.04.2019 20:28

html css border outline

09.04.2019 20:24

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

1 568

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

Ответы 5

Создавайте вложенные элементы со своими идентификаторами

<div id = "outer-border">
   <div id = "inner-border"></div>
</div>

Затем установите правильные свойства CSS для этих элементов, например, что-то вроде:

#outer-border{border-bottom: none}
#inner-border{border-bottom: none}

09.04.2019 20:46

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

Вы можете использовать box-shadow вместо outline — см. демонстрацию ниже:

div {
  line-height: 20px;
  border-color: black;
  border-style: double;
  border-width: 4px 4px 0 4px;
  box-shadow: -3px 0 0 0 black,  /* left */
              3px 0 0 0 black,  /* right */
              3px -3px 0 0 black, /* top */
              -3px -3px 0 0 black; /* top */
}

<div>&nbsp;</div>

09.04.2019 21:05

Почему бы не удалить контур и вместо этого создать вложенный элемент внутри элемента?

Вы можете сделать так:

Создайте вложенные элементы в HTML:

<div class = "big">
        <div class = "small">Some text Here.....</div>
</div>

Затем примените CSS:

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

Нет необходимости использовать схему.

создать скрипт js

— 09.04.2019 21:17

09.04.2019 21:08

Вот идея использования градиента для создания второй границы.

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  padding:3px; /*control the distance between border*/
  padding-bottom:0;
  background:
    linear-gradient(green,green) top  /100% 4px,
    linear-gradient(green,green) left /4px  100%,
    linear-gradient(green,green) right/4px  100%;
  background-repeat:no-repeat;
  background-origin:content-box;
}

<div class = "box">

</div>

Еще одна идея с использованием псевдоэлемента:

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  right:3px;
  bottom:0;
  border: solid 4px green;
  border-bottom:none;
}

<div class = "box">

</div>

09.04.2019 21:33

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    outline: solid 3px black;
    width: 400px;
    height: 200px;
    position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}

<div class = "st1"><div class = "st2"></div></div>

или

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    border: 3px solid black;
    border-bottom: none;
    width: 400px;
    height: 200px;
    position: relative;
    box-sizing: border-box;
}
.st2 {
    border: 1px solid black;
    border-bottom: none;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

<div class = "st1"><div class = "st2">test</div></div>

09.04.2019 21:39

Другие вопросы по теме

Как сделать многоточие в тексте

Nth-child не работает с ячейкой таблицы CSS

Счетчик начинается с 2, а не с 1

Как построить коробку с подключенной линией из json

Дочерний элемент теряет плавание, когда положение родительского элемента фиксировано

Как направить ссылку на страницу, загруженную в iframe на другой странице, и прокрутить ее до нужного места одним щелчком мыши?

Как я могу выйти из полноэкранного режима и одновременно запустить свою собственную функцию?

Как увеличить размер выпадающего меню

Анимация CSS - рисование линии слева направо при вводе мыши, затем исчезновение слева направо при выходе из мыши

Выбрать только элемент, который в данный момент зависает с помощью jquery, и переключить видимость следующего элемента?

Две границы разной ширины с 3 сторон

Ответы 5

Другие вопросы по теме

Похожие вопросы