Loại bỏ hiệu ứng Bevel ở góc biên giới

Question

Nếu một phần tử tồn tại trên một trang có nhiều màu đường viền, góc mà các màu này gặp nhau tạo một đường viền theo mặc định. Điều này có vẻ giống như một lựa chọn kỳ lạ cho phong cách góc biên giới. Thay vào đó, tôi thích rằng một trong những biên giới "vượt qua" biên giới khác sao cho một đường thẳng được hiển thị thay thế.

Để minh họa cho hiệu ứng này, hãy xem xét những điều sau đây:

Xem ví dụ jsFiddle ví dụ tôi tạo here.

Hai mục trên cùng hiển thị hành vi mặc định, vát. Hai phần dưới cùng hiển thị hành vi mong muốn, mong muốn, trong trường hợp này, phần biên giới "overpowers" hoặc "ghi đè" góc của border-left và border-right.

Các đánh dấu cho các trường hợp trên:

<div class="container"> 
    <div class="border">Item one</div> 
    <div class="border">Item two</div> 
</div> 

Và CSS:

.container { 
    margin: 5px; 
    width: 150px; 
    background: yellow; 
} 
.border { 
    padding: 5px; 
    border: 15px solid red; 
    border-top: 15px solid teal; 
} 

Các đánh dấu cho các trường hợp dưới:

<div class="container"> 
    <div class="border-top"></div> 
    <div class="border-reg">Item one</div> 
    <div class="border-top"></div> 
    <div class="border-reg">Item two</div> 
</div> 

Và CSS:

.border-top { 
    border-top: 15px solid teal; 
} 
.border-reg { 
    border: 15px solid red; 
    border-top: 0; 
    padding: 5px; 
} 

Mặc dù phương pháp thứ hai tôi nghĩ ra sẽ tạo ra hiệu ứng tôi muốn, có vẻ như đây là điều không cần thiết tẻ nhạt đối với một cái gì đó mà tôi đã giả định là có trạng thái mặc định. Nếu tôi muốn biên giới trái để ghi đè lên các biên giới khác, ví dụ, tôi sẽ phải đối phó với một số float: left và điên rồ yếu tố nội tuyến.

Câu hỏi (Cuối cùng)

Có phương pháp xóa hành vi bevel mặc định nào được quan sát trên tất cả các trình duyệt không? Mặc dù trường hợp chi tiết ở trên hầu hết là dễ dàng cho việc biên giới trên đầu hoặc biên giới ghi đè các góc, nhưng nó không dễ dàng như một công việc, ví dụ, nếu tôi cần biên giới bên trái và bên phải biên giới để ghi đè lên đầu biên giới và dưới cùng.

Answer 1

Đó là cách biên giới hoạt động, tôi tin rằng không có cách nào để thay đổi điều này mà không cần thêm yếu tố.

Thay vì div trống, bạn có thể sử dụng div bao bọc.

<div class="outer"> 
    <div class="inner">test</div> 
</div> 

.inner { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
} 
.outer { 
    border-top : 15px solid teal; 
} 

Demo: http://jsfiddle.net/fmcvY/

Có một cách khác để làm điều đó với :before/:after yếu tố psuedo nhưng đó là một hỗn độn chút, tuy nhiên nó đòi hỏi không phải trả thêm đánh dấu:

<div>test</div> 

div { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
    position:relative; 
    padding-top: 20px; /* border width plus desired padding */ 
} 
div:before { 
    content:' '; 
    display:block; 
    background: teal; 
    height:15px; 
    padding:0 15px; /* border width plus div padding */ 
    width:100%; 
    position:absolute; 
    top: 0; 
    left:-15px; /* border width plus div padding */ 
} 

Bạn có thể viết CSS theo nhiều cách khác nhau để đạt được hiệu quả tương tự.Demo: http://jsfiddle.net/fmcvY/3/

Answer 2

Nếu bạn không cần sự hỗ trợ cho các trình duyệt cũ (IE 8 và ít hơn), bạn có thể sử dụng box-shadow:

.border { 
    padding : 35px 20px 20px 20px; 
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal; 
} 

http://jsfiddle.net/fTGDs/