/
Da11oS
/
css_styles_examples
Обзор
Документация
Войти
/
Da11oS
/
css_styles_examples
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
border.html
81 строка
2 KB
Da11oS
init
09 июл 2025, 22:31
09 июл 2025, 22:31
f3aeeea
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Border Примеры</title> <style> .box { width: 200px; height: 150px; margin: 20px; padding: 10px; text-align: center; line-height: 150px; } /* Различные стили border */ .solid-border { border: 3px solid #3498db; } .dashed-border { border: 2px dashed #e74c3c; } .dotted-border { border: 1px dotted #f1c40f; } .double-border { border: 4px double #2ecc71; } .mixed-borders { border-top: 3px solid #3498db; border-right: 2px dashed #e74c3c; border-bottom: 1px dotted #f1c40f; border-left: 4px double #2ecc71; } /* Border-radius */ .rounded-box { border: 3px solid #3498db; border-radius: 15px; } .half-rounded { border: 3px solid #3498db; border-radius: 50%; } /* Box-shadow */ .shadow-box { border: 3px solid #3498db; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); } .inner-shadow { border: 3px solid #3498db; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); } </style> </head> <body> <h2>Примеры Border</h2> <!-- Простые границы --> <div class="box solid-border">Solid Border</div> <div class="box dashed-border">Dashed Border</div> <div class="box dotted-border">Dotted Border</div> <div class="box double-border">Double Border</div> <div class="box mixed-borders">Mixed Borders</div> <!-- Border-radius --> <div class="box rounded-box">Rounded Box</div> <div class="box half-rounded">Half Rounded</div> <!-- Box-shadow --> <div class="box shadow-box">Box Shadow</div> <div class="box inner-shadow">Inner Shadow</div> </body> </html>