Съдържание
Това е една от най -очакваните характеристики на новия стандарт на CSS3 и това във връзка с HTML5 успява да привлече много погледи, ние се позоваваме на Box Shadow който ни позволява да поставяме сенки върху кутиите в нашия документ HTML, като по този начин генерира ефект, сякаш той се носи на страницата.Елементът Shadow Shadow трябва да бъде съставен, както следва:
box-shadow: hoffset voffset blur spread color inset
Когато всеки от неговите атрибути изпълнява функция, нека разгледаме всеки от тях подробно:
- Хофсет: Това е хоризонталното отместване, което е стойност на дължината. Положителната стойност измества Box Shadow отдясно, от друга страна, отрицателна стойност измества сенката на кутията наляво.
- Voffset: Това е вертикалното отместване, което е стойност на дължината. Положителната стойност измества сенката на кутията под полето на елемента, а отрицателната стойност премества сянката на кутията над полето на елемента.
- Размазване: (Незадължително) Указва радиуса на дефиницията на сянка, която е стойност на дължината. Колкото по -висока е стойността, толкова по -неясен остава ръбът на кутията на елемента. За стойността по подразбиране 0 границата на сянката на кутията изглежда напълно дефинирана.
- Разпространение: (По избор) Посочете радиуса на дифузия на сянката, това е мярка за дължина. Положителната стойност кара сянката да се разширява във всички посоки на полето на съдържащия елемент, а отрицателната стойност води до свиване на сянката на съдържащия елемент.
- Цвят: (По избор) Това е цветът на сянката. Ако е пропуснат, браузърът ще реши цвета.
- Вмъкване: (По избор) Прави сянката хвърлена вътре в кутията на елемента, към който е приложена.
След като знаем атрибутите, нека бързо преминем към пример с код, за да приложим наученото на практика.
ПримерИма много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Както виждаме, можем да приложим Box Shadow В CSS вътре в етикета на стила този код генерира следния резултат:
Друг интересен аспект е, че в една и съща декларация на Box Shadow можем да посочим няколко сенки, например в следния код ще включим допълнителна сянка във вмъкването, нека видим:
ПримерИма много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Сега нека видим как и двете сенки се показват в нашия елемент: