Как сделать бордер css

Как сделать бордер css

Когда мы используем границу для изображения, мы хотим чтобы результат выглядел более привлекательным. Это, как известно, позволяет отделить картинку от другого контента на странице. Рассмотрим способы отрисовки границы.

Без использования границы:
Без бордера

Используя границу:
Используем бордер

С “Двойной границей“:
Двойной бордер

То что вы видите можно просто сделать в графических редакторах, таких как Photoshop, ImageReady или FireWorks. Но давайте подумаем что надо будет сделать, если, например, вам нужно поменять границу изображения, которое уже использовалось на сайте, а в связи со сменой дизайна надо её поменять. Вам надо будет открыть каждую картинку в редакторе и поменять бордер. Если у вас на сайте всего 3-4 изображения, то это займёт несколько минут, а если у вас их 100?

Вы можете добиться такого же эффекта очень просто с помощью CSS. И вам понадобится всего несколько секунд чтобы поменять все границы на сайте.

Как мы это сделаем?

Самый простой бордер:

Двойной бордер, подсвеченный цветом:

Другие плюсы этой техники.

Все мы обычно уменьшаем качество картинок перед использованием их в интернете, таким образом оптимизируя сайт. А теперь представьте, что вам понадобилось увеличить картинку с нарисованной границей на клиенте, в результате вы получите размытые края. В примере ниже я специально использовал синий бордер, чтобы было лучшу видно размытость. На картинке слева используется CSS, справа — бордер является частью изображения.

Как сделать такой закруглённый бордер?

введите сюда описание изображения

Как сделать такой закруглённый бордер только при помощи css?

Через border- указать трем сторонам цвет, четвертую сделать прозрачной. А чтобы повернуть круг на нужный градус используем transform: rotate

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать бордер что бы он точно ложился под текст при сжатии блока?

тут код
jsfiddle.net/u7eth90a
проблема в том что при сжатии блока когда прыгает текст бордер выходит за границы текста. как тут поступить правильно? (вариант с br для примера мне он не подходит)
bab414e6dc.jpg

  • Вопрос задан более трёх лет назад
  • 3214 просмотров
  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter
  • Facebook
  • Вконтакте
  • Twitter

Как вариант укажи h1 нужный width.
У тебя родитель имеет 50% + padding по 10px. H1 твой padding не учитывает. У него свой width на ширину блока.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *