如何将网格视图的形状更改为圆形？答案

【问题标题】：How can I change the shape of a gridview to circular?如何将网格视图的形状更改为圆形？
【发布时间】：2013-09-18 12:18:19
【问题描述】：

如何将 GridView 的正方形更改为圆形，或者是否可以在圆形对象上显示 gridview 或说图像？

我已经尝试过：-

1-add cssclass to the gridview where css class had a line of code for a background image
2-applied headerclass css to the gridview and gave the image source there.
3-applied a backimage property to the Grid.
(the image in all the 3 cases was a circle)

css 是

    .circle{ background:url(circle.png); opacity:0.5;height:176px;width:176px;}

我正在尝试在 Visual Studio 10 的我的 aspx 页面中插入 GridView

但似乎没有什么能按我想要的方式工作。 GridView 单元格在前 2 个案例中未对齐。

如果可能的话，请给我一个正确的方法。

提前致谢

【问题讨论】：

你的 CSS 和标记在哪里？
css 是 ....circle{ background:url(circle.png); opacity:0.5;height:176px;width:176px;} ，我正在尝试在 Visual Studio 10 中插入我的 aspx 页面
请编辑您的帖子。
你能发一个小提琴吗？您可以复制 GridView 呈现的 HTML 标记并添加您的 CSS

标签： c# asp.net css gridview

【解决方案1】：

你不必使用图片，只需使用 CSS 形成一个圆圈，例如

.circle {
    width: 320px;
    height: 320px;
    background: LightPink;
    -moz-border-radius: 160px;
    -webkit-border-radius: 160px;
    border-radius: 160x;
}

另外，不要改变网格本身的形状 - 这可能会导致错位。将网格放置在应用了上述类的 DIV 内。

演示：http://jsfiddle.net/pnFGt/

【讨论】：

@Yuriy 非常感谢，它成功了，现在只需要对齐列。 PS-gridview 已经在一个 div 中，该 div 有一个用 javascript 代码定义的类，该类有一个链接到它的 jquery。