#html #css #border
Вопрос:
Некоторое время назад я видел, как установить границу вокруг блока с помощью :: раньше. Пожалуйста, помогите мне настроить аналогичную рамку, как в примере с границей изображения
Ответ №1:
На самом деле, вам не нужно использовать ::before . Вы можете просто использовать свойство границы. Это работает так:
Вы можете изменить стиль границы с помощью этого свойства: border-style:
Вы можете изменить ширину с помощью этого свойства: border-width:
Вы можете изменить ширину с помощью этого свойства: border-color:
Чтобы сделать границу в примере, используйте следующий код:
CSS:
#example-element { padding: 40px; border-width: 5px; border-style: solid; border-color: green; } Текст HTML:
lt;p id = "example-element"gt;Lalalalt;brgt;Booom!!lt;brgt;I love to code! Hello world! HTML and CSS are the best!lt;/pgt; Надеюсь, это поможет 😀
Комментарии:
1. Спасибо. Как заставить его переместить границу на другую картинку, как в примере?
Ответ №2:
Эти свойства наиболее полезны в данных обстоятельствах. Я бы установил границу на el и фоновое изображение на :раньше.
el,el:before{ // subtractive size box-sizing:border-box; } el{ // contain child position:relative; } el:before{ // fill space position:absolute; display:block; top:0;left:0;width:100%;height:100%; // ignore clicks pointer-events:none // styles z-index:2; border:0.05em solid red; box-shadow: inset 0 0 .05em red; }