Thuộc tính bán kính đường viền và thu gọn biên giới của CSS3: sụp đổ không trộn lẫn. Làm cách nào tôi có thể sử dụng bán kính đường viền để tạo bảng bị sập với các góc tròn?

Chỉnh sửa - Original Title: Có một cách khác để đạt được border-collapse:collapsetrong CSS(theo thứ tự để có một sụp đổ, bàn góc tròn)?

Vì hóa ra chỉ đơn giản là làm cho các đường viền của bảng bị sụp đổ không giải quyết được vấn đề gốc, tôi đã cập nhật tiêu đề để phản ánh tốt hơn các cuộc thảo luận.

Tôi đang cố gắng tạo một bảng với các góc tròn bằng cách sử dụng CSS3 border-radiustài sản. Các kiểu bảng tôi đang sử dụng trông giống như thế này:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Đây là vấn đề. Tôi cũng muốn đặt thuộc border-collapse:collapsetính và khi đó được đặt border-radiuskhông còn hoạt động. Có cách nào dựa trên CSS để tôi có thể có được hiệu ứng tương tự như khi border-collapse:collapsekhông thực sự sử dụng nó không?

Chỉnh sửa:

Tôi đã tạo một trang đơn giản để trình bày vấn đề ở đây (chỉ dành cho Firefox / Safari).

Có vẻ như một phần lớn của vấn đề là việc đặt bảng có các góc tròn không ảnh hưởng đến các góc của các thành tdphần góc . Nếu bảng chỉ có một màu, đây sẽ không phải là vấn đề vì tôi chỉ có thể làm cho các tdgóc trên cùng và dưới cùng được làm tròn cho hàng đầu tiên và cuối cùng. Tuy nhiên, tôi đang sử dụng các màu nền khác nhau cho bảng để phân biệt các tiêu đề và để phân loại, vì vậy các tdyếu tố bên trong cũng sẽ hiển thị các góc tròn của chúng.

Tóm tắt các giải pháp đề xuất:

Bao quanh bàn có một yếu tố khác với các góc tròn không hoạt động vì các góc vuông của bàn "chảy qua".

Chỉ định chiều rộng đường viền thành 0 không làm sập bảng.

Các tdgóc dưới cùng vẫn vuông sau khi đặt khoảng cách ô bằng không.

Thay vào đó, sử dụng JavaScript - hoạt động bằng cách tránh sự cố.

Phương pháp khả thi:

Các bảng được tạo bằng PHP, vì vậy tôi chỉ có thể áp dụng một lớp khác nhau cho mỗi th / tds bên ngoài và định kiểu riêng từng góc. Tôi thà không làm điều này, vì nó không thanh lịch và hơi khó để áp dụng cho nhiều bảng, vì vậy hãy tiếp tục đề xuất.

Giải pháp khả thi 2 là sử dụng JavaScript (cụ thể là jQuery) để định kiểu các góc. Giải pháp này cũng hoạt động, nhưng vẫn không hoàn toàn như những gì tôi đang tìm kiếm (tôi biết tôi rất kén chọn). Tôi có hai đặt phòng:

1. đây là một trang web rất nhẹ và tôi muốn giữ JavaScript ở mức tối thiểu
2. một phần của sự hấp dẫn mà việc sử dụng bán kính đường viền đối với tôi là sự xuống cấp duyên dáng và tăng cường tiến bộ. Bằng cách sử dụng bán kính đường viền cho tất cả các góc được làm tròn, tôi hy vọng sẽ có một trang web được làm tròn nhất quán trong các trình duyệt có khả năng CSS3 và một trang web vuông nhất quán ở những người khác (tôi đang nhìn vào bạn, IE).

Tôi biết rằng cố gắng làm điều này với CSS3 ngày hôm nay có vẻ không cần thiết, nhưng tôi có lý do của mình. Tôi cũng muốn chỉ ra rằng vấn đề này là kết quả của đặc tả w3c, không phải là hỗ trợ CSS3 kém, vì vậy mọi giải pháp sẽ vẫn có liên quan và hữu ích khi CSS3 có hỗ trợ rộng rãi hơn.

Tôi đã hiểu rồi. Bạn chỉ cần sử dụng một số bộ chọn đặc biệt.

Vấn đề với làm tròn các góc của bảng là các phần tử td cũng không trở nên tròn. Bạn có thể giải quyết điều đó bằng cách làm một cái gì đó như thế này:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Bây giờ mọi thứ đều tròn trịa, ngoại trừ việc vẫn còn vấn đề border-collapse: collapsephá vỡ mọi thứ.

Một cách giải quyết là thêmborder-spacing: 0 và để mặc định border-collapse: separatetrên bàn.

Phương pháp sau hoạt động (được thử nghiệm trong Chrome) bằng cách sử dụng box-shadowmột dải 1pxthay vì đường viền "thực".

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

Nếu bạn muốn một giải pháp chỉ CSS (không cần thiết lập cellspacing=0trong HTML) cho phép viền 1px (mà bạn không thể làm với border-spacing: 0giải pháp), tôi thích làm như sau:

• Đặt một border-rightvà border-bottomcho các ô của bạn ( tdvà th)
• Cung cấp cho các tế bào trong hàng đầu tiên mộtborder-top
• Cung cấp cho các tế bào trong cột đầu tiên mộtborder-left
• Sử dụng first-childvà last-childbộ chọn, làm tròn các góc thích hợp cho các ô của bảng trong bốn góc.

Xem bản demo tại đây.

Cho HTML sau:

XEM ví dụ dưới đây:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Bạn đã thử sử dụng table{border-spacing: 0}thay vì table{border-collapse: collapse}???

Có lẽ bạn sẽ phải đặt một yếu tố khác xung quanh bàn và tạo kiểu với đường viền tròn.

Các dự thảo làm việc quy định cụ thể mà border-radiuskhông áp dụng cho các yếu tố bảng khi giá trị của border-collapselà collapse.

Như Ian đã nói, giải pháp là lồng bảng bên trong một div và đặt nó như thế:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

Với overflow:hidden, các góc vuông sẽ không chảy qua div.

Theo hiểu biết tốt nhất của tôi, cách duy nhất bạn có thể làm là sửa đổi tất cả các ô như vậy:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

Và sau đó để có được đường viền ở phía dưới và bên phải trở lại

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childkhông hợp lệ trong eg6, nhưng nếu bạn đang sử dụng thì border-radiustôi cho rằng bạn không quan tâm.

BIÊN TẬP:

Sau khi xem trang ví dụ của bạn, có vẻ như bạn có thể làm việc xung quanh trang này với khoảng cách ô và phần đệm.

Các đường viền màu xám dày mà bạn đang thấy thực sự là nền của bảng (bạn có thể thấy rõ điều này nếu bạn thay đổi màu đường viền thành màu đỏ). Nếu bạn đặt khoảng cách ô là 0 (hoặc tương đương td, th { margin:0; }:), "viền" màu xám sẽ biến mất.

EDIT 2:

Tôi không thể tìm ra cách để làm điều này chỉ với một bảng. Nếu bạn thay đổi hàng tiêu đề của mình thành một bảng lồng nhau, bạn có thể có thể có được hiệu ứng bạn muốn, nhưng nó sẽ hiệu quả hơn và không năng động.

Tôi đã thử một cách giải quyết bằng cách sử dụng các phần tử giả :beforevà :aftertrên thead th:first-childvàthead th:last-child

Kết hợp với bọc bàn với một <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

xem jsFiddle

Hoạt động với tôi bằng chrome (13.0.782.215) Hãy cho tôi biết nếu điều này hoạt động với bạn trong các trình duyệt khác.

Trên thực tế, bạn có thể thêm tablebên trong của bạn divnhư là một gói của nó. và sau đó gán các CSSmã này cho trình bao bọc:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Các câu trả lời đã cho chỉ hoạt động khi không có đường viền quanh bàn, điều này rất hạn chế!

Tôi có một macro trong SASS để làm điều này, nó hỗ trợ đầy đủ các đường viền bên ngoài và bên trong, đạt được kiểu dáng tương tự như thu gọn biên giới: sụp đổ mà không thực sự chỉ định nó.

Đã thử nghiệm trong FF / IE8 / Safari / Chrome.

Cung cấp các đường viền tròn đẹp trong CSS thuần trong tất cả các trình duyệt nhưng IE8 (xuống cấp một cách duyên dáng) vì IE8 không hỗ trợ bán kính đường viền :(

Một số trình duyệt cũ hơn có thể yêu cầu tiền tố của nhà cung cấp hoạt động border-radius, vì vậy hãy thoải mái thêm các tiền tố đó vào mã của bạn khi cần thiết.

Câu trả lời này không phải là ngắn nhất - nhưng nó hoạt động.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

Để áp dụng phong cách này, chỉ cần thay đổi

<table>

gắn thẻ sau:

<table class="roundedTable">

và chắc chắn bao gồm các kiểu CSS ở trên trong HTML của bạn.

Hi vọng điêu nay co ich.

Đối với bảng có viền và có thể cuộn, hãy sử dụng bảng này (thay thế các biến, $văn bản bắt đầu)

Nếu bạn sử dụng thead, tfoothoặc th, chỉ cần thay thế tr:first-childvà tr-last-childvà tdvới họ.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Tôi đã từng gặp vấn đề tương tự. xóa border-collapsehoàn toàn và sử dụng: cellspacing="0" cellpadding="0" trong tài liệu html. thí dụ:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Tôi vừa viết một bộ CSS điên rồ cho việc này dường như hoạt động hoàn hảo:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Giải pháp với thu gọn viền: tách riêng cho bảng và hiển thị: bảng nội tuyến cho tbody và thead.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Tôi mới sử dụng HTML và CSS và tôi cũng đang tìm giải pháp cho vấn đề này, đây là những gì tôi tìm thấy.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Tôi thử nó, đoán những gì nó hoạt động :)

Tìm thấy câu trả lời này sau khi gặp vấn đề tương tự, nhưng thấy nó khá đơn giản: chỉ cần cho bảng tràn: ẩn

Không cần một yếu tố gói. Cấp, tôi không biết nếu điều này sẽ làm việc 7 năm trước khi câu hỏi ban đầu được hỏi, nhưng nó hoạt động bây giờ.

Bảng với các góc tròn và với các ô được viền. Sử dụng giải pháp @Ramon Tayag .

Chìa khóa là sử dụng border-spacing: 0như ông chỉ ra.

Giải pháp sử dụng SCSS .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Tôi bắt đầu thử nghiệm với "hiển thị" và tôi thấy rằng: border-radius, border, margin, padding, trong một tableđược hiển thị với:

display: inline-table;

Ví dụ

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Nhưng chúng ta cần đặt một widthcột

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Dưới đây là một ví dụ gần đây về cách triển khai bảng có các góc được làm tròn từ http://medialoot.com/preview/css-ui-kit/demo.html . Nó dựa trên các bộ chọn đặc biệt được đề xuất bởi Joel Potter ở trên. Như bạn có thể thấy, nó cũng bao gồm một số phép thuật để làm cho IE có một chút hạnh phúc. Nó bao gồm một số kiểu bổ sung để xen kẽ màu của các hàng:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

Đây là một cách:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

Hoặc là

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Tôi luôn luôn làm theo cách này bằng Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Giải pháp tốt nhất cho đến nay đến từ giải pháp của riêng bạn và nó diễn ra như sau:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Bán kính biên giới hiện được hỗ trợ chính thức. Vì vậy, trong tất cả các ví dụ trên, bạn có thể bỏ tiền tố "-moz-".

Một mẹo khác là sử dụng cùng màu cho các hàng trên cùng và dưới cùng là đường viền của bạn. Với cả 3 màu giống nhau, nó hòa trộn và trông giống như một chiếc bàn tròn hoàn hảo mặc dù nó không phải là vật lý.