所以我想做的是使 asp:Table 曲线的边框向内(类似于 border-radius，但向内)。我想要实现的目标的图片:
我无法将内容放入 div 中并 flex 其 Angular ，因为这不允许我在网站上实现我想要的外观。
我在此页面上尝试做的是将table的边框设置为与背景相同的背景颜色。
这是我目前的代码:
html,body, #main_div{
height: 100%;
}
body {
background-color: #1862A1;
background-image: linear-gradient(90deg, #1862A1, #8529B1);
padding-bottom: 0;
padding-top: 0;
margin: 0;
}
.main_table{
height: 100%;
width: 80%;
background-color: transparent;
min-height: 61vh;
}
.album{
width: 8vw;
height: 8vw;
}
.inside{
background-color: white;
width: 25vh;
height: 27vh;
border-radius: 20px;
}
.border{
border: 3px solid white;
}
#continuation{
min-height: 39vh;
background-color: white;
width: 80%;
}<body>
<form id="form1" runat="server">
<center>
<table id="Table1" runat="server" CellPadding="0" GridLines="Both" HorizontalAlign="Center" class="main_table">
<tr class="border">
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/ADHD.jpeg" ID="Image1" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button1" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/all-eyez-on-me.png" ID="Image2" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button2" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/DAMN.jpg" ID="Image3" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button3" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/detroit-2.jpg" ID="Image4" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button4" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/ISSA.jpg" ID="Image5" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button5" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
</tr>
<tr class="border">
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/forst-hills-drive.jpg" ID="Image6" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button6" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/hollywoods-bleading.jpg" ID="Image7" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button7" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/kirk.jpg" ID="Image8" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button8" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/TA13OO.jpg" ID="Image9" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button9" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
<td class="border">
<center>
<table class="inside">
<tr>
<td><center><asp:Image src="../pics/without-warning.jpg" ID="Image10" runat="server" CssClass="album"></asp:Image></center></td>
</tr>
<tr>
<td><center><asp:Button ID="Button10" runat="server" Text="Button" CssClass="album_button"></asp:Button></center></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<div id="continuation">
</div>
</center>
</form>
</body>在代码片段中，我将 asp:Table 标记与 table 切换，将 asp:TableRow 标记与 tr 和带有 td 的 asp:TableCell 标记。
目前，代码正在生成:
为了营造出 table 周围的边框就像 div 中的切口的错觉，我必须将 .border 类中的边框设置为就像图片中那样，或者使用其他方法 - 有人有什么想法吗？
最佳答案
您可以使用radial-gradient()来模拟它
.box {
width:200px;
height:200px;
border:5px solid #fff;
background:
radial-gradient(farthest-side at top left ,transparent 97%,#fff) bottom right,
radial-gradient(farthest-side at top right ,transparent 97%,#fff) bottom left,
radial-gradient(farthest-side at bottom left ,transparent 97%,#fff) top right,
radial-gradient(farthest-side at bottom right,transparent 97%,#fff) top left;
background-size:30px 30px; /* adjust this */
background-repeat:no-repeat;
}
body {
background:linear-gradient(to right,red,blue)
}<div class="box"></div>使用边框图像的另一个想法:
.box {
width: 200px;
height: 200px;
margin: 5px;
border: 1px solid transparent;
box-shadow: 0 0 0 5px #fff;
border-image: radial-gradient(farthest-side, transparent 97%, #fff) 100;
border-image-width: 40px; /* adjust this */
}
body {
background: linear-gradient(to right, red, blue)
}<div class="box"></div>关于html - 试图使边界曲线向内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66415116/