Добавьте несколько градиентов к границам, чтобы хорошо выглядеть!

внешний интерфейс CSS
Добавьте несколько градиентов к границам, чтобы хорошо выглядеть!

Это 8-й день моего участия в ноябрьском испытании обновлений.Подробности о событии:Вызов последнего обновления 2021 г.

Всем привет, я Пинеллиа 👴, программист из песка, который только начал писать. Если вам понравилась моя статья, вы можете подписаться на ➕ Нравится 👍 Добавьте меня в WeChat:frontendpicker, приглашаем вас присоединиться к группе, вместе изучать интерфейс и общаться, а также стать лучшим инженером~.нажми на меняИсследуйте новые миры!

предисловие

Есть люди, которые думают, что CSS — это инструмент компоновки, игнорируя суть CSS. Что означает CSS? Каскадные таблицы стилей (Cascading Style Sheets) Второе слово действительно, стиль стиль стиль! Есть люди, которые игнорируют мощь CSS. Тот же эффект, различные реализации, всегда будет хорошо и плохо, но и не бояться вас с собой! В этой статье мы изучим различные свойства через реализацию границы.

border-image

Ранее я писал статью, посвященную этому свойству. "24 картинки, чтобы покорить бордюр-изображение"-Наггетс.Талант/пост/699557…

Прежде всего, это свойство является аббревиатурой следующих свойств,

border-image-sourceуказанный ресурс

border-image-sliceУкажите положение обрезки изображения

border-image-widthуказать ширину

border-image-outsetуказывает количество области для рисования за границей

border-image-repeatЭто в основном то же самое, что и background-repeat*

выполнить

border-image-source может принимать не только изображения, но и градиенты.

Примечание. Одним из недостатков этой реализации является то, что border-radius: не может действовать. Таким образом, закругленная граница градиента, после указания большого парня в области комментариев: clip-path:inset(0 round 2px); может решить проблему закругленных углов. 2px здесь подходит для той же ширины границы.25 картинок, которые нужно освоить после прочтения

Здесь весь div разделяется, а затем используется streach для растягивания всего изображения границы.

     .border-image {
        width: 200px;
        height: 100px;
        border: 2px solid;
        border-image-source: linear-gradient(45deg, #56ECC7, #9f5ad8);
        clip-path:inset(0 round 2px);
        border-image-slice: 1;
        border-image-repeat: stretch;
      }

image-20211108232240601

фон+родительско-дочерний div

``` .container { background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%); padding: 1px; width: 200px; height: 100px; border-radius: 4px; } .box { background: #fff; border-radius: 4px; width: 100%; height: 100%; } </style>
```

image-20211108232246825

фон+div+псевдоэлемент

Глядя на предыдущий пример, некоторые люди могут подумать, что, поскольку можно использовать два элемента div, почему бы не использовать один элемент div и добавить :after? Конечно, это возможно

image-20211108232725786

Примечание. Псевдоэлемент здесь играет роль родительского элемента div выше. Кто-то может поверить в это или нет. Обязательно добавьте градиент в контейнер, а затем установите для элемента белый цвет. Рассматривали ли вы случай, когда контейнер имеет содержимое.

 .container::after {
    content: "";
	z-index: -1;background: 
	linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);
}
    <div class="container">渐变边框</div>

background-clip

Этот атрибут представлен не так часто, см. предыдущую статью: «Атрибуты изображения (в середине), фоновое вложение, клип, повтор, размер и т. д.».Наггетс.Талант/пост/699483…

background-clip: поле содержимого; фон обрезается до внешнего края поля содержимого.

background-clip: border-box; фон простирается до внешнего края границы (но ниже границы).

Здесь мы устанавливаем два градиента, полностью белый градиент и используем background-clip: content-box для покрытия области содержимого. Затем используйте background-clip: border-box; поместите linear-gradient(45deg, #56ecc7, #6067f3); на границу. Вот почему вам нужно установить background-origin: border-box;

   .container {;
        border: solid 1px transparent;
        border-radius: 5px;
        background-image: linear-gradient(#fff, #fff),
          linear-gradient(45deg, #56ecc7, #6067f3);
        background-origin: border-box;
        background-clip: content-box, border-box;
        text-align: center;
        line-height: 80px;
      }

постскриптум

Изначально я планировал подарить книгу на этой неделе, но вчера я увидел, что ее уже прислал большой парень, поэтому я перепутал!Какой? Полоса прокрутки тоже можно заменить на "обновку"!, вы можете напрямую участвовать в этом большом парне, книга по веб-оптимизации по-прежнему хороша.

Категории