父 div 上的邊框半徑

Question

在具有display:flex的父 div 內有三個 div。

我想為父 div 創建一個邊框半徑，但有些東西不起作用。

我的代碼是：

 <div style="height:50px;display:flex;width:500px;border-radius: 20px;"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

邊界半徑是不可見的。 子級可能具有width:0%或width:100% ，因此應將邊框半徑應用於父容器。

怎么可能呢？

Answer 1

添加overflow:hidden到父 div

 <div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow:hidden"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

Answer 2

嘗試這個：

 <div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow: hidden"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

所以添加overflow: hidden到父級應該可以解決問題

Answer 3

只需添加overflow: hidden到父 div或將邊框半徑應用於第一個和最后一個子級。 有時，某些元素對父級剪輯它們的反應不佳，而對直接剪輯的反應更好。 以下是這兩種方法：

父級的邊界半徑：

 body > div { border-radius: 20px; overflow: hidden; }

 <div style="height:50px;display:flex;width:500px;"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

兒童的邊框半徑：

 body > div > div:first-child { border-radius: 20px 0 0 20px; } body > div > div:last-child { border-radius: 0 20px 20px 0; }

 <div style="height:50px;display:flex;width:500px;"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>