С помощью свойств CSS мы можем контролировать только толщину границы;не длина.
Однако мы можем имитировать эффект границы и контролировать его width и height, как мы хотим, другими способами.
С помощью CSS (линейный градиент):
Мы можем использовать linear-gradient(), чтобы создать фоновое изображение (изображения) и контролировать его размер и положение с помощью CSS, чтобы он выглядел как граница.Поскольку мы можем применить несколько фоновых изображений к элементу, мы можем использовать эту функцию, чтобы создать несколько рамок, подобных изображениям, и применить их к разным сторонам элемента.Мы также можем покрыть оставшуюся доступную область каким-нибудь сплошным цветом, градиентом или фоновым изображением.
Обязательный HTML:
Все, что нам нужно, это только один элемент (возможно, имеющий несколькокласс).
<div class="box"></div>
Шаги:
- Создание фоновых изображений с помощью
linear-gradient(). - Использование
background-sizeотрегулируйте width / height созданного выше изображения, чтобы оно выглядело как граница. - Используйте
background-position для регулировки положения (например, left, right, left bottom и т. д.) созданных выше границ.
Необходимые CSS:
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}
Примеры:
С помощью linear-gradient() мы можем создавать границы как сплошного цвета, так и градиентов.Ниже приведено несколько примеров создания границы с помощью этого метода.
Пример с применением границы только на одной стороне:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, calc(100% - 4px) 100%;
background-position: left bottom, 4px 0;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Пример с рамкой, нанесенной с двух сторон:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
background-position: left bottom, right top, 4px 0;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Пример с рамкой, примененной со всех сторон:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
background-position: left bottom, left bottom, right top, right top, 4px 4px;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(to right, purple, red),
linear-gradient(to bottom, purple, red),
linear-gradient(to left, purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Снимок экрана:
