Слияние кода завершено, страница обновится автоматически
?> Обзор: 
box-shadow, transform, @media
<script v-pre type="text/x-template" id="one-pixel-line"> <style> main { width: 100%; padding: 52px 29px; display: flex; justify-content: center; } span.one-pixel-line { width: 229px; position: relative; } span.one-pixel-line::after { content: ''; width: 229px; position: absolute; bottom: 0; left: 0; box-shadow: 0 0 0 1px #b4a078; transform-origin: 0 bottom; transform: scaleY(.5) translateZ(0); } @media (min-resolution: 2dppx) { span.one-pixel-line.shadow::after { box-shadow: 0 0 0 .5px #b4a078; } } @media (min-resolution: 3dppx) { span.one-pixel-line.shadow::after { box-shadow: 0 0 0 .333333px #b4a078; } } </style> <script> </script>
box-shadow+transformдля создания линии 1px
<script v-pre type="text/x-template" id="one-pixel-line-border"> <style> main { width: 100%; padding: 52px 29px; display: flex; justify-content: center; } span.one-pixel-line { display: block; width: 229px; height: 229px; position: relative; } span.one-pixel-line.right, span.one-pixel-line.bottom, span.one-pixel-line.left { margin-left: -229px; } span.one-pixel-line::before, span.one-pixel-line::after { content: ""; display: block; position: absolute; transform-origin: 0 0; } /* верхняя линия */ span.one-pixel-line.top::before { width: 100%; top: 0; left: 0; border-top: 1px solid #b4a078; transform-origin: 0 top; } @media (min-resolution: 2dppx) { span.one-pixel-line.top::before { width: 200%; transform: scale(0.5) translateZ(0); } } @media (min-resolution: 3dppx) { span.one-pixel-line.top::before { width: 300%; transform: scale(0.333333) translateZ(0); } } /* правая линия */ span.one-pixel-line.right::after { height: 100%; top: 0; right: 0; border-right: 1px solid #b4a078; transform-origin: right 0; } @media (min-resolution: 2dppx) { span.one-pixel-line.right::after { height: 200%; transform: scale(0.5) translateZ(0); } } @media (min-resolution: 3dppx) { span.one-pixel-line.right::after { height: 300%; transform: scale(0.333333) translateZ(0); } } /* нижняя линия */ span.one-pixel-line.bottom::after { width: 100%; bottom: 0; left: 0; border-bottom: 1px solid #b4a078; transform-origin: 0 bottom; } @media (min-resolution: 2dppx) { span.one-pixel-line.bottom::after { width: 200%; transform: scale(0.5) translateZ(0); } } @media (min-resolution: 3dppx) { span.one-pixel-line.bottom::after { width: 300%; transform: scale(0.333333) translateZ(0); } } /* левая линия */ span.one-pixel-line.left::before { height: 100%; top: 0; left: 0; border-left: 1px solid #b4a078; transform-origin: 0 left; } @media (min-resolution: 2dppx) { span.one-pixel-line.left::before { height: 200%; transform: scale(0.5) translateZ(0); } } @media (min-resolution: 3dppx) { span.one-pixel-line.left::before { height: 300%; transform: scale(0.333333) translateZ(0); } } </style>
border+ псевдоэлемент +transformдля создания независимого края 1px :thumbs_up_sign:```markdown
333333) translateZ(0);
}
}
<style>
<template>
<main class="main">
<span class="однопиксельная_линия верхний"></span>
<span class="one_pixel_line right"></span>
<span class="one_pixel_line bottom"></span>
<span class="one_pixel_line left"></span>
</main>
</template>
<script>
</script>Примечание: В данном контексте было решено использовать более понятные названия для CSS-классов, чтобы они имели смысл на русском языке. Однако, если требуется строго следовать за исходной структурой, можно оставить классы без изменения.
### Поддержка браузерами
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-media-resolution&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="432px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="409px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms3d&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="453px"></iframe>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )