Още за box модела

Най-важното за box модела в този урок

Освен margin, padding и border, бокс моделът включва и визуални ефекти като outline, box-shadow и border-radius. Важно е да запомните, че outline стои извън рамката и не се влияе от заоблянето на ъглите, докато border, фонът и сянката се заоблят при зададен border-radius. Това ви дава фин контрол върху външния вид на всеки HTML елемент.

Стъпка по стъпка: добавяне на стилове към елемент

1. Добавете рамка към елемент: задайте ширина 1px, стил solid и черен цвят.
2. Добавете outline, за да получите външен контур извън рамката.
3. Създайте сянка с box-shadow, като зададете:
   
   • хоризонтално отместване 5px
   • вертикално отместване 5px
   • blur (плътност) 3px
   • черен цвят
4. Заоблете ъглите с border-radius: 5px; и наблюдавайте как това влияе на рамката, фона и сянката, но не и на outline.

Експериментирайте със стойностите, за да видите как се променя визуалният резултат.

Използвани CSS свойства

• border – добавя рамка с ширина, стил (напр. solid) и цвят
• outline – външен контур, който не заема място и не се влияе от border-radius
• box-shadow – добавя сянка чрез отместване по X и Y, blur и цвят
• border-radius – заобля ъглите на елемента в зададени пиксели