| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>径向渐变</title>
- <style>
- .box1{
- width: 300px;
- height: 300px;
- /* background-color: #bfa; */
- margin: 200px auto;
- /*
- radial-gradient() 径向渐变（放射性的效果）
- 默认情况下，径向渐变圆心的形状是根据元素的形状来计算的
- 元素是正方形的，径向渐变圆心就是圆形的
- 元素是长方形的，径向渐变圆心就是椭圆形的
- -我们也可以手动指定径向渐变的大小
- circle
- ellipse
- -也可以指定渐变的位置（使用at）
- -语法：
- radial-gradient（大小 at 位置，颜色 位置，颜色 位置，颜色 位置）
- 大小：
- circle 圆形
- ellipse 椭圆
- closest-side 近边
- closest-corner 近角
- farthest-side 远边
- farthest-corner 远角
- 位置：
- top、right、left、center、bottom
- 大小、位置都可以省略不写
- */
- /* background-image: radial-gradient(red,yellow); */
- /* background-image: radial-gradient(100px 100px,red,yellow); */
- /* background-image: repeating-radial-gradient(100px 100px,red,yellow); */
- /* background-image: radial-gradient(100px 200px,red,yellow); */
- /* background-image: radial-gradient(circle,red,yellow); */
- /* background-image: radial-gradient(ellipse,red,yellow); */
- /* background-image: radial-gradient(100px 100px at 0 0,red,yellow); */
- /* background-image: radial-gradient(100px 100px at 100px 100px,red,yellow); */
-
- /* background-image: radial-gradient(at 100px 100px,red,yellow); */
- /* background-image: radial-gradient(at top left,red,yellow); */
- background-image: radial-gradient(at 0 0,red,yellow);
- /* background-image: radial-gradient(closest-side at 100px 100px,red,yellow); 近边 */
- /* background-image: radial-gradient(farthest-side at 100px 100px,red,yellow); 远边 */
- /* background-image: radial-gradient(closest-corner at 100px 100px,red,yellow); 近角 */
- /* background-image: radial-gradient(farthest-corner at 100px 100px,red,yellow); 远角 */
- }
- </style>
- </head>
- <body>
- <div class="box1"></div>
- </body>
- </html>
|
