用css写一个上面是图片圆角边框颜色为渐变下面是文字东湖风景5列4行

你可以使用CSS来创建这样一个效果，结合`background-image`, `border-radius`, 和 `linear-gradient` 来实现图片部分的样式，同时使用`display: grid`布局管理文字部分。这是一个示例代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, auto); gap: 10px; padding: 15px; } .image-section { position: relative; overflow: hidden; } .image-section img { width: 100%; border-radius: 50%; background: linear-gradient(to right, rgba(244, 244, 244, 1) 0%, rgba(236, 236, 236, 1) 50%, rgba(218, 218, 218, 1) 100%); } .text-section { text-align: center; } </style> </head> <body> <div class="container"> <div class="image-section"> <img src="your_image_url.jpg" alt="东湖风景">  </div> <div class="text-section"> <p>东湖风景</p>     </div> </div> </body> </html> ``` 请将`your_image_url.jpg`替换为你实际需要的图片URL。这个例子设置了容器为网格布局，图片区域有一个圆形的渐变边框，文字区域居中显示。

阅读全文