向 GridView 添加圆角？

【问题标题】：Adding rounded corners to GridView?向 GridView 添加圆角？
【发布时间】：2013-04-10 06:02:23
【问题描述】：

我想让我的 GridView 的角弯曲。我试过THIS，但它给了一个向右延伸的边界。如果我可以使 GridView 的每个单元格都弯曲，如果它不太难实现的话，那就太好了。这是我的 GridView：

<asp:GridView  ID="GridView1" runat="server" AutoGenerateColumns="False" 
                        onrowdatabound="GridView1_RowDataBound" BackColor="White" 
                        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" >
....something... </asp:GridView>

【问题讨论】：

标签： asp.net html css

【解决方案1】：

这里有三种方法都涉及样式表。

.GridView1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

对于CSS

或在你的对象上

style= "-moz-border-radius: 15px;border-radius: 15px;"

或在 JQuery 中

$("#GridView1").css("border-radius","15px").css("-moz-border-radius","15px");

【讨论】：

将样式应用到你的是标签
谢谢，+1 我找到了另一种方法，我已将其发布为答案。
啊这就是我说的:(:p

【解决方案2】：

将CssClass="round" 放入GridView1

.round
{
 border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

【讨论】：

【解决方案3】：

您好，您可以尝试使用 CSS

<div class="corners">
<asp:GridView> </asp:GridView>
</div>

和css

.corners { border: 1px solid green; -moz-border-radius: 8px; border-radius: 8px;overflow: hidden;-webkit-border-radius: 8px;}

【讨论】：

【解决方案4】：

这就像一个魅力...... http://www.aspforums.net/Threads/749379/How-to-give-GridView-rounded-corners/Replies/1#Replies

【讨论】：

【解决方案5】：

这就是如何将圆角添加到 ASP.NET GridView：

<style>
    :root{--gv-border-radius: 7px;}
    .rcgv
    {
        border-radius: var(--gv-border-radius);
        border-width: 0 !important;
    }
    .rcgv th:first-child
    {
        border-top-left-radius: var(--gv-border-radius);
    }
    .rcgv th:last-child
    {
        border-top-right-radius: var(--gv-border-radius);
    }
    .rcgv tr:last-child td:first-child
    {
        border-bottom-left-radius: var(--gv-border-radius);
    }
    .rcgv tr:last-child td:last-child
    {
        border-bottom-right-radius: var(--gv-border-radius);
    }
</style>
<asp:GridView ID="GridView1" CssClass="rcgv" runat="server" ShowFooter="true" ></asp:GridView>

希望这将帮助您为 GridView 添加时尚的边框半径。

【讨论】：