Как сдвинуть border на определенное расстояние?
Может быть вопрос прозвучал нубовски, но я реально с таким не сталкивался еще.
Нужно еще один контейнер, чтобы бордер его обтекал или как то еще есть способы?
На кртинке цветом показал где должны быть бордеры
- Вопрос задан более трёх лет назад
- 8987 просмотров
Комментировать
Решения вопроса 1
Все можно решить c помощью padding:
https://jsfiddle.net/r5hkjeLs/
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 2
начинающий верстальщик html, css
такое лучше через псевдоэлемент. Основной Ваш див , например
.block position: relative;
width: 200px;
height:300px;
background-color: #fff;
>
.block::before content: «»;
z-index: 1;
position: absolute;
width:180px;
height: 280px;
top: 10px;
left: 10px;
border: 2px solid blue; >
Только имейте ввиду, что все, что внутри основного блока надо будет тоже поместить в отдельный див и так же абсолютно позиционировать с z-индексом 2
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
border-bottom
Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что .
border-bottom-style: dotted; border-bottom: thick green;
. это то же самое, что .
border-bottom-style: dotted; border-bottom: none thick green;
. и значение border-bottom-style (en-US), указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style (en-US) является none , то без указания border-style граница не будет показана.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue;
The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
Values
Formal definition
- border-bottom-width (en-US): medium
- border-bottom-style (en-US): none
- border-bottom-color (en-US): currentcolor
- border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
- border-bottom-style (en-US): как указано
- border-bottom-color (en-US): вычисленный цвет
- border-bottom-color (en-US): цвет
- border-bottom-style (en-US): discrete
- border-bottom-width (en-US): длина
Formal syntax
border-bottom =
|| (en-US)
|| (en-US)
=
| (en-US)
thin | (en-US)
medium | (en-US)
thick
=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset
Examples
Applying a bottom border
HTML
div>This box has a border on the bottom side.div>
CSS
div border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; >
Results
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 11 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Свойство outline-offset
Можно сделать такой интересный эффект (обратите внимание на толщину белого промежутка между границами, он 10px , а не 14 , так как часть съел outline своей толщиной в 4px ):
Смотрите также
- свойство outline-width ,
которое задает толщину рамки - свойство outline-style ,
которое задает стиль рамки - свойство outline-color ,
которое задает цвет рамки - свойство outline ,
которое является свойством сокращением для рамок
как сдвинуть рамку блока
Изменение границ блока не помогает. Нужно чтобы нижняя рамка левых блоков была на одной высоте с рамкой правых блоков.
.about-exemple-second:not(:last-of-type) < border-bottom: solid 3px; >.about-exemple:not(:last-of-type) < border-right: solid 3px; border-bottom: solid 3px; >.about-exemple < height: 100px; position: relative; overflow: hidden; display: block; width: 350px; text-align: center; >.about-exemple-second
текст
текст
текст
текст
текст
текст
Отслеживать
rainbowfoxz08
задан 26 авг 2022 в 10:53
rainbowfoxz08 rainbowfoxz08
28 6 6 бронзовых знаков
Куда сдвинуть? Какую границу? Нужно больше подробностей и ожидаемый результат.
26 авг 2022 в 11:02
У Вас один из закрывающих тегов p битый
26 авг 2022 в 12:44
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
у блока
по умолчанию всегда есть внешние отступы margin , которые вам и портят всё позиционирование, вылезая за пределы родительских . Исправляется просто: либо у всех
принудительно убираем margin , либо родительским задаем хотя бы минимальный padding .
.about-exemple-second:not(:last-of-type) < border-bottom: solid 3px; >.about-exemple:not(:last-of-type) < border-right: solid 3px; border-bottom: solid 3px; >.about-exemple < padding: 1px; box-sizing: border-box; height: 100px; position: relative; overflow: hidden; display: block; width: 350px; text-align: center; >.about-exemple-second < padding: 1px; box-sizing: border-box; position: relative; bottom: 300px; left: 350px; width: 300px; height: 100px; display: block; text-align: center; >/*p < margin: 0; >*/ текст
текст
текст
текст
текст
текст