径向渐变
径向渐变使用 radial-gradient 函数语法。
这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小。
默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致。
下面代码演示径向渐变的用法:
<!DOCTYPE html><html> <head> <title>径向渐变</title> <style type="text/css"> body{ padding:20px; } div{color:#fff;} div.one{ 150px; height:150px; border:1px solid #000; background: radial-gradient(red, blue, rgb(30, 144, 255)); } div.two{ 150px; height:150px; border:1px solid #000; background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%); } div.three{ 150px; height:150px; border:1px solid #000; background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px); } div.four{ 150px; height:150px; border:1px solid #000; background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } </style> </head> <body> <h1>软件开发,成就梦想</h1> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </body></html>工作中可以使用渐变生成工具,提高工作效率。