Question

我想让我的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>

Answer 1

以下是涉及样式表的三种方法。

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

for css

或您的对象

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

或在JQuery中

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

Answer 2

将CssClass="round"放入GridView1

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

Answer 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;}

Answer 4

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

Answer 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添加时尚的边框半径。

向GridView添加圆角？

5 个答案: