Бордюр для плитки керамической
Содержание
- 2. Примеры с различными границами рамок CSS border
- 2.1. Пример. Разные стили оформления границы рамки border-style
- 2.2. Пример. Изменения цвета рамки при наведении курсора мыши
- 2.3. Пример. Как сделать прозрачную рамку border
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
<html> <head> <style> .border_style_dotted{ border: 2px dotted #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_dashed{ border: 2px dashed #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_solid{ border: 2px solid #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_double{ border: 2px double #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_groove{ border: 5px groove #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_ridge{ border: 5px ridge #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_inset{ border: 5px inset #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_outset{ border: 5px outset #1E90FF; padding: 3px; margin-bottom: 5px; } .border_complex{ border-left: 5px solid #1E90FF; border-right: 5px dotted #1E90FF; border-top: 5px double #1E90FF; border-bottom: 5px dashed #1E90FF; padding: 3px; margin-bottom: 5px; } </style> </head> <body> <div class=»border_style_dashed»>border-style: dashed</div> <div class=»border_style_dashed»>border-style: dashed</div> <div class=»border_style_solid»>border-style: solid</div> <div class=»border_style_double»>border-style: double</div> <div class=»border_style_groove»>border-style: groove</div> <div class=»border_style_ridge»>border-style: ridge</div> <div class=»border_style_inset»>border-style: inset</div> <div class=»border_style_outset»>border-style: outset</div> <div class=»border_complex»>Четыре разных рамки</div> </body> </html>
