borderСвойство — это свойство, которое часто используется в практических приложениях.Помимо того, что оно используется в качестве границы, некоторые распространенные эффекты (такие как макет равной высоты, макет с прокруткой с фиксированным содержимым вверх и вниз, рисование значков CSS и т. д.) , некоторых более сложных эффектов можно добиться, используя новые значения свойств CSS3 (например, заполнение границ картинками).
В этой статье не рассказывается об основном методе применения свойства границы, а непосредственно рассказывается, как добиться некоторых общих эффектов с помощью свойства границы.
Используйте границу для рисования многоугольников, таких как треугольники и трапеции.
В CSS обычными плоскими фигурами являются прямоугольники и круги. Но неизбежно возникают некоторые сценарии, которые требуют от нас использования CSS для рисования треугольников, трапеций и параллелограммов. На этом этапе мы можем использовать некоторые характеристики производительности границы при рендеринге для достижения этих функций. Ниже объясняется, как шаг за шагом получить треугольник.
Сначала мы пишемdiv, стиль такой
.border {
width: 200px;
height: 100px;
margin: 0 auto;
border-top: 40px solid red;
border-bottom: 40px solid green;
border-left: 40px solid yellow;
border-right: 40px solid blue;
}После рендеринга браузера эффект выглядит следующим образом:
Мы обнаружили, что, установив разные цвета для четырех границ элемента div, визуализируемое выражение представляет собой границу, состоящую из четырех трапеций.
Если мы определим высоту как 0, то рендеринг будет следующим:
Если мы снова установим ширину в 0, результат будет следующим:
До сих пор, сравнивая различные стили, определенные выше, мы обнаружили, что в CSS внешний вид границы на самом деле отображается в форме трапеции (что может быть связано сgrooveЭто связано со значением атрибута 3D-эффекта, и я не изучал его подробно). Когда ширина и высота элемента равны 0, он становится четырьмя сжатыми вместе треугольниками. Следовательно, мы можем думать, что если цвет трех границ определен как прозрачный цветtransparent, затем обернув внешний контейнер и установив внешний контейнерoverflow:hidden, то у нас получится равнобедренная трапеция или треугольник. Теперь мы модифицируем css следующим образом:
.trapezoid {
width: 200px;
height: 0;
border-top: none;
border-bottom: 60px solid #249ff1;
border-left: 40px solid transparent;
border-right: 40px solid transparen;
}У нас получится следующая трапеция:
Установите стиль следующим образом:
.triangle {
width: 0;
height: 0;
border-top: 0 solid transparent;
border-bottom: 100px solid #249ff1;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}У нас получится следующий треугольник:
Поскольку все 2D-полигоны можно разделить на несколько треугольников, плюсborderВ основе этой формы выражения мы можем установить различные значения ширины границы, цвета и заимствоватьпсевдоэлементИли объединение нескольких элементов может привести к более сложной графике.Теоретически мы можем нарисовать любой полигон с помощью CSS. Например, многоконечные звезды, ромбы и наши обычные пузыри чата. Ниже приведены некоторые примеры
Используйте границу для достижения одинаковой высоты расположения левого и правого столбцов
В реальных проектах мне часто нужны двухколоночные макеты, такие как левая область строки меню и правая область контента для управления фоном, а также макет, похожий на классифицированную навигацию Jingdong, как показано на рисунке ниже.
Существует множество решений для создания такого макета, например использование отступов и отступов для компенсации друг друга. Но если вы используете границы для его реализации, возможно, удастся сделать CSS более кратким, и его применимость и совместимость будут выше. Например, для эффекта первой картинки у нас есть следующая структура html.
<div class="menu">
<ul>
<li>首页</li>
<li>商品管理</li>
<li>营销中心</li>
<li>会员管理</li>
<li>系统设置</li>
</ul>
</div>
<div class="content">这里是内容区域</div>и следующий основной CSS:
.menu {
float: left;
width: 200px;
color: #FFF;
}
.content {
border-left: 200px solid #40403b;/*这里是主要的样式*/
padding: 20px;
height: 1000px; /* 这里代表内容区域 */
}Поскольку ширина границы не поддерживает процентные значения, недостатком этого метода реализации является то, что трудно напрямую адаптировать ширину левой и правой сторон пропорционально.
Используйте границу для реализации фиксированного макета вверх и вниз на мобильном терминале
В приложении на мобильном терминале верхняя и нижняя часть страницы фиксированы, а прокрутка в средней области содержимого является обычной компоновкой, как показано на рисунке ниже.
Есть также много способов добиться этого макета, как правило, с использованием верхнего и нижнегоfixedпозиция(фиксированное позиционирование на мобильном терминале, будет ошибка, когда клавиатура неуместна и используется в сочетании с преобразованием, это еще одна статья для анализа), а затем используйтеmargin,paddingреализовать. Однако, если граница используется для достижения не только лаконичности кода, но и высокой совместимости. Основной стиль заключается в добавлении прозрачных верхней и нижней границ в области содержимого, ширина верхней границы равна высоте головы, а ширина нижней границы равна высоте шагов. следующим образом:
header,footer {
position: fixed;
width: 100%;
line-height: 50px;
color: #FFF;
background: #249ff1;
text-align: center;
}
header {
top: 0;
left: 0;
}
footer {
bottom: 0;
left: 0;
}
.container {
padding: 20px;
background: #f3f3f3;
height: 1000px; /*这里代表内容*/
border-top: 50px solid transparent;/*上边框宽度等于header高度*/
border-bottom: 50px solid transparent;/*下边框宽度等于footer高度*/
}Используя этот метод, мы также можем добиться позиционирования фона, такого как добавление водяного знака Watermark на нижний правый угол и верхний левый угол, так как расположен в виде картин.
подсказки бордюрного цвета
Поскольку значение цвета границы равно значению цвета шрифта метки, когда граница не указывает цвет, мы можем использовать эту функцию для создания некоторых эффектов. Например: метка с рамкой, граница и цвет шрифта в обычном состоянии серый, а при наведении курсора синий, как показано ниже:
При нормальных обстоятельствах мы будем использовать псевдоэлементы для записи знака плюс внутри.Когда мышь проходит мимо, нам нужно изменить значение цвета границы, значение цвета шрифта и значение цвета фона псевдоэлемента одновременно, но используя это атрибут, нам нужно только изменить значение тега a.Значение цвета шрифта. код показывает, как показано ниже.
a {
position: relative;
display: inline-block;
padding: 30px 20px;
color: #a7a7a7;
border: 1px solid;
}
a:hover {
color: #249ff1;
}
a:before,a:after {
content: '';
display: block;
}
a:after {
border-top: 2px solid;
width: 20px;
}
a:before {
position: absolute;
top: 20px;
left: 29px;
border-left: 2px solid;
height: 20px;
}Внедрить адаптивный треугольник
Иногда нам нужно сделать адаптивные эффекты треугольника, как на картинке ниже. Это страница регистрации, и требования к дизайну таковы: выбор двух удостоверений в верхней части страницы регистрации представляет собой два прямоугольника с серым фоном, а ширина является адаптивной. Пятиугольник, который превращается в синий фон при выборе одной из идентичностей.
Для выполнения этого требования вы можете использовать SVG или CSS3.clip-pathСвойства для достижения, но если мы хотим использовать границу для достижения, как это сделать?
Мы разделяем элементы пользовательского интерфейса.Существует много методов разделения.Естественно разделить активную фигуру на прямоугольник вверху и равнобедренный треугольник внизу. Таким образом, стили CSS могут быть определены с помощью псевдоэлементов и метода рисования треугольников с границами. Но здесь возникает проблема, поскольку ширина двух меток является адаптивной, поэтому значение ширины границы также должно быть адаптивным, но значение ширины границы не поддерживает проценты. ? ? Как сделать? В настоящее время первым методом, который приходит нам на ум, естественно, будет использование динамического вычисления js, но нет ли способа сделать это без динамического вычисления js? Мы можем нарисовать график для анализа.
Предположим, что прямоугольная область, образованная разделенным треугольником, является родительским элементом (синяя часть на рисунке), а реальный треугольник является дочерним элементом или псевдоэлементом, расположенным относительно элемента (здесь выбран псевдоэлемент, красный и синий крестик на рисунке) , то нашей метке нужен толькоdiv.
Когда мы хотим, чтобы треугольник адаптировался к прямоугольнику, идеальным его состоянием должно быть пересечение красного и синего на рисунке (треугольник, реализуемый верхней границей + прозрачные левая и правая границы). Зависит отborder-widthПроцентные значения не поддерживаются. Давайте сначала зададим ширину границы достаточно большим значением. После позиционирования она становится красным треугольником на рисунке. Часть переполнения, мы делаем это в родительскомoverflow:hiddenТо есть реализуется такой адаптивный треугольник. Остальное, как найти и как установить это значение.
Мы предполагаем, что ширина родителя равна a, высота равна b, а треугольникborder-top— это y, граница слева и граница справа — это x. Перед позиционированием точка A должна совпадать с точкой B. После позиционирования относительное положение точки A и точки B определяется(-(x-0.5a） , -(y-b)）. На этот раз мы столкнулись с другой проблемой, то есть x и y являются фиксированным большим значением, а a и b являются процентным значением, тогда CSS должен выполнить расчет для определения местоположения с помощью CSS3.calcСвойства можно решить, но могут быть проблемы с совместимостью. Подумав под другим углом, если точку А можно расположить относительно середины точек С и D, тогда относительное положение станет(-x,-y), проблема решена. Давайте внесем некоторые изменения в изображение, как показано ниже:
Если мы установим высоту родителя на 0, используйте padding-top, чтобы растянуть высоту, установите ширину на 0,5a, используйтеpadding-leftЧтобы растянуть еще на 0,5а, затем точка А позиционируется относительно точки Р (точка Р теперь является левым верхним углом области содержимого). В это время положение A относительно P равно(-x,-y). На данный момент адаптивный треугольник можно создать с помощью следующих стилей.(Обратите внимание на соотношение границы слева и границы сверху, которое можно рассчитать на основе сходных характеристик треугольника)
<div></div>div {
width: 40%;
padding-top: 8%;
padding-left: 40%;/*宽高比为10:1*/
overflow: hidden;
border: 1px solid red;/*为方便观察显示*/
}
div:after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 1500px solid transparent;/*足够大的边框宽度*/
border-right: 1500px solid transparent;/*足够大的边框宽度*/
border-top: 300px solid #249ff1;/*宽高比为10:1，即（1500+1500）: 300*/
/*定位（-x,-y）*/
margin-top: -300px;
margin-left: -1500px;
}Эффект следующий:
С помощью этого метода можно реализовать дизайн метки вкладки на странице регистрации выше. В то же время различные типы треугольников могут быть реализованы путем настройки различных параметров. Пусть основание определяемого равнобедренного треугольника равно 2x, высота равна y, ширина, требуемая родителем, равна 2a, а высота равна b. Тогда каждое значение удовлетворяет соотношению следующим образом:
border-left = border-right = x = -margin-left;
border-top / padding-top = x / a;
margin-top = -border-top;
至于border-left的取值则根据实际需要设置一个大值即可，
而border-top与三角形的形状有关，即与a和b比例有关Выше приведены некоторые функции и практические применения свойства границы, а дополнительные функции и сценарии использования будут обновлены позже. Напишите их пока.