Сделать рамку css
Необходимо сделать такую рамку с помощью css, как на картинке, то есть внешняя граница — прямоугольник, внутренняя — скругленный прямоугольник. Это должна быть именно РАМКА, потому что ее нужно наложить сверху на другие элементы, поэтому в центре должно быть пустое место, чтобы другие элементы не перекрылись
Отслеживать
задан 22 ноя 2021 в 15:18
Покажите ваш код?
22 ноя 2021 в 15:21
Ну раз необходимо сделать — сделайте. Кто мы такие, чтобы Вас останавливать)
22 ноя 2021 в 15:21
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Самое сложное — это заставить себя победить лень. А остальное делается просто:
.border < position: relative; height: 140px; width: 300px; padding: 0.5em; overflow: hidden; box-shadow: 0 0 0 15px #000; >.border::before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 8px; box-shadow: 0 0 0 5px #000; pointer-events: none; >body < margin: 0; min-height: 100vh; background: 50% 50% / cover url('https://i.stack.imgur.com/tWGMC.jpg') no-repeat; display: grid; place-items: center; >Необходимо сделать рамку с помощью CSS: внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник.
Фон блока должен быть прозрачным.Вариант с полосой прокрутки:
.border < position: relative; height: 140px; width: 300px; padding: 0.5em; overflow: hidden; box-shadow: 0 0 0 15px #000; >.border::before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 8px; box-shadow: 0 0 0 5px #000; pointer-events: none; >.text < position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0.5em 0em 0.5em 1.1em; overflow: hidden scroll; >.text::-webkit-scrollbar < width: 1em; background-color: #0000; >.text::-webkit-scrollbar-thumb < width: 1em; background: 0.25em 0.5em / 0.5em calc(100% - 1em) linear-gradient(90deg, #0002, #0002) no-repeat, 0.25em 0% / 0.5em 0.5em radial-gradient(circle at 50% 100%, #0002 0.25em, #0000 0.25em) no-repeat, 0.25em 100% / 0.5em 0.5em radial-gradient(circle at 50% 0%, #0002 0.25em, #0000 0.25em) no-repeat; >.text:hover::-webkit-scrollbar-thumb < background: 0.25em 0.5em / 0.5em calc(100% - 1em) linear-gradient(90deg, #000b, #000b) no-repeat, 0.25em 0% / 0.5em 0.5em radial-gradient(circle at 50% 100%, #000b 0.25em, #0000 0.25em) no-repeat, 0.25em 100% / 0.5em 0.5em radial-gradient(circle at 50% 0%, #000b 0.25em, #0000 0.25em) no-repeat; >body < margin: 0; min-height: 100vh; background: 50% 50% / cover url('https://i.imgur.com/pCm96IG.png') no-repeat; display: grid; place-items: center; > Необходимо сделать такую рамку с помощью css, как на картинке, то есть внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник. Это должна быть именно РАМКА, потому что ее нужно наложить сверху на другие элементы, поэтому в центре должно быть пустое место, чтобы другие элементы не перекрылись Рамки и линии CSS/HTML
Рамки и линии всегда присутствуют практически на любом сайте, они помогают визуально разделить контент, подчеркнуть или обратить внимание пользователя на нужные элементы, и придать дизайну уникальность.
Рамка для блока CSS
Простая рамка для блока CSS может пригодится для галереи, для того, чтобы выделить изображение. Также можно воспользоваться генератором рамки для блока, и там настроить все параметры нужной рамки,а затем скопировать результат.
Пример
HTML
CSS
.block-border < width: 100px; height: 100px; border: 2px solid #f66d52; /* Параметры рамки */ background: #ccc; /* Цвет фона */ >
Рамка внутри блока или картинки при наведении
Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.
Пример
HTML
CSS
img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >
Рамка к изображению при наведении
Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.
Пример
HTML
CSS
img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >
Как добавить вертикальную линию к тексту
Чтобы добавить линию к тексту необходимо задать элементу класс. Такое оформление может пригодиться для цитат, сообщений, предупреждений или передачи какой-то важной информации. Цвет линии и фона можно менять по своему усмотрению. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.
Как добавить вокруг текста рамку определенного цвета?
Для создания рамки вокруг текста используйте стилевое свойство border , добавляя его к соответствующему селектору. Например, если для текста применяется тег
, то для него надо установить следующий стиль.
Применение свойства border к текстовому абзацу продемонстрировано в примере 1.
Пример 1. Рамка вокруг абзаца
HTML5 CSS 2.1 IE Cr Op Sa Fx
Рамка вокруг текста p Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.
Результат данного примера показан на рис. 1.
Рис. 1. Вид рамки вокруг абзаца
Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом , для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).
Пример 2. Рамка вокруг слоя
HTML5 CSS 2.1 IE Cr Op Sa Fx
Рамка вокруг текста .outline Перед тем как убить героя, антагонист обязательно рассказывает ему про все свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист весьма умело использует данное время против самого злодея. Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.
Border-radius: закругленные углы в CSS
В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.
Как закруглить углы: свойство CSS3 border-radius
Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).
Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:
.borderElement
Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:
Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:
.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; >.borderElement1
Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:
.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; >
Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:
- border-top-left-radius — для верхнего левого угла;
- border-top-right-radius — для верхнего правого угла;
- border-bottom-left-radius — для нижнего левого угла;
- border-bottom-right-radius — для нижнего правого угла.
Принцип скругления углов
На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px :
Свойство CSS border-radius поддерживается всеми современными версиями браузеров.