Как сделать такую рамочку, как в гугле, с помощью CSS?
2 ответа
Открой "DevTools" (ctrl+shift+i, Инструменты разработчика, Инспектор, Проинспектировать элемент. В разных браузерах и переводах название может отличаться) и посмотри:
background: #fff;
border: 1px solid #dadce0;
border-radius: 8px;
Вписать можно в атрибут style="..."
, но лучше добавьте класс в HTML и свойства в CSS.
-
Спасибо! Но куда это вписывать? Вписывая в *{}, каждая обводится, а как обвести все блоки одной рамочкой? 18 сен в 15:12
-
-
@Noname203, полагаю, Вы хотели такого эффекта добиться: codepen.io/darinka-poznyak/pen/Yzdromq 18 сен в 19:29
Если Вы хотите обвести рамочкой со скругленными углами несколько блоков, то это можно реализовать несколькими способами. Первый способ.
- в html-документе создаёте
<div>
с классом container, например. 2. внутри этого<div>
с классом container создаете еще несколько<div>
(например, 3) и присваиваете им соответствующие классы. Например, block1, block2, block3. 3. В css-файле задаёте размер Вашего контейнера (при помощи свойств width, height), сплошную границу, толщиной 1px серого цвета (при помощи свойства border), и скругление углов контейнера в 8px (при помощи свойства border-radius). При необходимости задаёте позиционирование контейнера на странице. 4. задаёте размер блокам, находящимся в контейнере (при помощи свойств width, height), при необходимости задаёте сплошную границу толщиной 1px чёрного цвета, например (при помощи свойства border), при необходимости задаёте отступы блокам внутри контейнера (при помощи свойства margin). 5. подключаете css-файл к html-файлу при помощи тега<link>
всё везде сохраняете и наслаждаетесь результатом в браузере.
.container {
width: 162px;
height: 210px;
border: 1px solid gray;
border-radius: 8px;
margin: auto;
}
.block1,
.block2,
.block3 {
width: 150px;
height: 60px;
border: 1px solid black;
margin: 5px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>border-radius</title>
</head>
<body>
<div class="container">
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
</body>
</html>
Второй способ.
- В html-файле создаёте
<div>
, который будет играть роль контейнера. 2. внутри этого<div>
создаёте еще несколько<div>
, которые будут играть роль блоков. 3. Для<div>
, который играет роль контейнера, через атрибут style задаёте ему размер при помощи атрибутов width, height, сплошную границу серого цвета толщиной 1px при помощи атрибута border, скругление углов границы (рамки) при помощи атрибута border-radius со значением 8px. При необходимости позиционируйте на странице<div>
, который выполняет роль контейнера. 4.<div>
, которые выполняют роль блоков, также при помощи атрибута style задаёте размер, при помощи атрибутов width, height, границу блокам (при необходимости), при помощи атрибута border, отступы при помощи атрибута margin. Сохраняете и наслаждаетесь результатом в браузере.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>border-radius</title>
</head>
<body>
<div style="width: 162px; height: 210px; border: 1px solid gray; border-radius: 8px; margin: auto;">
<div style="width: 150px; height: 60px; border: 1px solid black; margin: 5px;"></div>
<div style="width: 150px; height: 60px; border: 1px solid black; margin: 5px;"></div>
<div style="width: 150px; height: 60px; border: 1px solid black; margin: 5px;"></div>
</div>
</body>
</html>
Третий способ.
Делаете всё тоже самое, что и в первом способе, за исключением создания css-файла и подключения его к html. Т.к. третий способ предполагает запись стилей в тег <style>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
.container {
width: 162px;
height: 210px;
border: 1px solid gray;
border-radius: 8px;
margin: auto;
}
.block1,
.block2,
.block3 {
width: 150px;
height: 60px;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
</body>
</html>