Радиална градиент - градиент за създаване на ефекти при прехода от един цвят в друг. За разлика от линеен градиент. тя използва или кръгла или елипсовидна преход. промяна Directions цвят отива в различни посоки от центъра. Радиална градиент също наречен "кръгова градиент."
Радиална градиент дава от свойствата на радиално-градиент заедно с фона. Той има много опции, които ще се вземат предвид при наследяване.
Синтаксис CSS радиално-градиент
- позиция - първоначалната х и у координати (най-често се определя като процент). Има константи:
- отгоре - в центъра (50% 0%)
- В левия горен - в горния ляв ъгъл (0% 0%)
- горния десен - в горния десен ъгъл (100% 0%)
- център (по подразбиране) - център на областта (50% до 50%)
- ляв център - ляв център (0% до 50%)
- десен център - дясно средна (100% до 50%)
- отдолу - долната центъра (50% 100%)
- левия долен - долния ляв (0% 100%)
- долния десен - долния десен (100% 100%)
- форма - задачата на формата на градиент. Има два варианта:
- кръг - кръг
- елипса - елипса
- размер - като градиент ще простра. Може да има следните стойности
- Най-близкото страна - градиента има тенденция да се затвори граничен елемент.
- Най-близкото-ъгъл - градиента клони към най-близкия ъгъл.
- отдалечената страна (по подразбиране) - градиента простира далеч този елемент.
- близкото-ъгъл - градиент простира до другия край на елемента.
- COLOR1 - първоначалния цвят
- COLOR2 - крайния цвят
Можете да зададете на прехода от няколко цвята, разделени със запетая.
В интерес на само два цвята, можете да зададете един прост пример. например
За браузъри, трябва да зададете този имот с представки продавачът версия. -moz -, - webkit-, -ms-, о-:
Радиално-градиент собственост могат също да се повтори: повтаряне-радиален наклон
Примери радиално градиенти
Пример 1 Различни изходна позиция
Чрез дума може да се зададе в положението на центъра на радиален градиент.
На страницата се превръща в по-долу
Свързани статии