<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: inline-block; width: 200px; height: 200px; margin: 30px auto; text-align: center; line-height: 200px; color: #ccc; font-size: 50px; border: 1px solid #000; } /* 径向渐变 radial-gradient: 中心位置，起始颜色，终止颜色 radial-gradient: 辐射半径 中心位置，起始颜色，终止颜色 中心位置：at left right center bottom top */ div:nth-child(1) { background-image: radial-gradient(at left top, red, green); } div:nth-child(2) { background-image: radial-gradient(at 50px 50px, red, green); } div:nth-child(3) { background-image: radial-gradient(at center, red, green); } /* 辐射半径 */ div:nth-child(4) { background-image: radial-gradient(50px at center, red, green); } div:nth-child(5) { background-image: radial-gradient(50px at 100px 100px, red, green, yellow, blue, orange); } div:nth-child(6) { border-radius: 100%; border: none; background-image: radial-gradient(150px at 50px 50px, #fff, #0ff); } div:nth-child(7) { background-image: radial-gradient(50px at 100px 100px, red 0%, red 25%, green 25%, green 50%, yellow 50%, yellow 75%, blue 75%, blue 100%); } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> </body> </html>
- demo 效果
