Вместо border-top
попробуйте использовать псевдоэлемент :after
, чтобы воссоздать нужный эффект.
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
content: "";
width: 100%;
height: 5px;
top: -5px;
background: dodgerblue;
padding: 1px;
left: -1px;
}
Выбор 2:
Использовать linear-gradient()
.
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}
Вы можете использовать сопоставление
с глобальным модификатором:
>>> '1 2 3 4'.match(/\d/g);
["1", "2", "3", "4"]
Джон Ресиг написал в своем блоге об отличной технике под названием « Искать и не заменять »
Она работает с использованием функции замены javascript, которая принимает функцию обратного вызова, и ничего не возвращает, чтобы исходное содержимое оставалось неизменным.
Это может быть лучше, чем использование глобального сопоставления и итерации по массиву результатов, особенно если вы захватываете несколько групп.