Đường cong thuộc tính CSS bán kính đường viền bên ngoài

Question

Làm thế nào để tạo đường cong bán kính đường viền bên ngoài?

Phía dưới bán kính biên giới muốn uốn cong bên ngoài. Làm thế nào để làm điều đó với CSS3?

Answer 1

Có, bạn có thể thực hiện việc này mà không cần thêm bất kỳ dấu phụ nào. Viết như thế này:

CSS

.active{ 
    border:1px solid red; 
    border-bottom:0; 
    width:80px; 
    height:40px; 
    margin:30px; 
    position:relative; 
    -moz-border-radius:5px 5px 0 0; 
    -webkit-border-radius:5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 
.active:after, 
.active:before{ 
    content:''; 
    width:40px; 
    height:30px; 
    border:1px solid red; 
    position:absolute; 
    bottom:-3px; 
    border-top:0; 
} 
.active:after{ 
    border-left:0; 
    -moz-border-radius:0 0 5px 0; 
    -webkit-border-radius:0 0 5px 0; 
    border-radius: 0 0 5px 0; 
    left:-41px; 
} 
.active:before{ 
    border-right:0; 
    -moz-border-radius:0 0 0 5px; 
    -webkit-border-radius:0 0 0 5px; 
    border-radius: 0 0 0 5px; 
    right:-41px; 
} 

HTML

<div class="active">hi</div> 

Kiểm tra này http://jsfiddle.net/p6sGJ/