Bán kính đường viền bắt đầu bằng CSS3

Question

Có cách nào để tạo bán kính đường viền inset bằng css3 không? (Nếu không có hình ảnh)

Tôi cần bán kính biên giới như thế này:

Answer 1

Cách tốt nhất tôi đã tìm thấy để đạt được điều này với tất cả CSS và HTML (không có hình ảnh, v.v.) là using CSS3 gradients, mỗi Lea Verou. Từ giải pháp của cô:

div.round { 
    background: 
     -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background-position: bottom left, bottom right, top right, top left; 
     -moz-background-size: 50% 50%; 
     -webkit-background-size: 50% 50%; 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
} 

Kết quả thực là một tập hợp các gradient trong suốt với các đường cong. Xem toàn bộ JSFiddle để có bản trình diễn và phát xung quanh với giao diện. Rõ ràng điều này phụ thuộc vào sự hỗ trợ cho rgba và gradient và phù hợp với việc thiết kế, bạn nên cung cấp dự phòng dựa trên hình ảnh cho các trình duyệt cũ hơn (đặc biệt là IE) t hỗ trợ gradient thậm chí thông qua IE9).

Answer 2

Nó không giống như đó là có thể. Tôi đã thử một bán kính biên giới với một giá trị âm chỉ để xem điều gì sẽ xảy ra nhưng nó không có hiệu lực.

Edit:

Thậm chí nếu bạn phá vỡ các hộp xuống thành những phần nhỏ hơn, tại một số điểm bạn vẫn muốn có để tạo ra một góc hình chữ nhật trong suốt. Tính minh bạch là một phần khó khăn có thể ngăn chặn điều này là có thể mà không có hình ảnh. Về cơ bản, bạn phải có khả năng hiển thị vòng tròn trong suốt với bg không trong suốt xung quanh (và nếu có thể trong CSS, tôi muốn biết cách :)

Nếu bạn không cần độ trong suốt, có nhiều cách để làm điều đó.

Answer 3

Tôi không nghĩ rằng nó sẽ có thể nếu các góc phải trong suốt, tuy nhiên nếu nền được biết, bạn có thể tạo một div ở mỗi góc với đường viền tròn. Nếu những div đó sau đó được cho cùng một màu nền như nền trang thì hiệu ứng sẽ hoạt động.

Xem ví dụ của tôi ở đây http://jsfiddle.net/TdDtX/

#box { 
 
    position: relative; 
 
    margin: 30px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    border: 1px solid #333; 
 
} 
 

 
.corner { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    border: 1px solid #333; 
 
    background-color: #fff; 
 
} 
 

 
.top-left { 
 
    top: -1px; 
 
    left: -1px; 
 
    border-radius: 0 0 100% 0; 
 
    border-width: 0 1px 1px 0; 
 
} 
 

 
.top-right { 
 
    top: -1px; 
 
    left: 190px; 
 
    border-radius: 0 0 0 100%; 
 
    border-width: 0 0 1px 1px; 
 
} 
 

 
.bottom-left { 
 
    top: 90px; 
 
    left: -1px; 
 
    border-radius: 0 100% 0 0; 
 
    border-width: 1px 1px 0 0; 
 
} 
 

 
.bottom-right { 
 
    top: 90px; 
 
    left: 190px; 
 
    border-radius: 100% 0 0 0; 
 
    border-width: 1px 0 0 1px; 
 
}

<div id="box"> 
 
    <div class="corner top-left"></div> 
 
    <div class="corner top-right"></div> 
 
    <div class="corner bottom-left"></div> 
 
    <div class="corner bottom-right"></div> 
 
</div>

Answer 4

Bạn có thể đạt được hiệu ứng này với css3-Border-hình ảnh mới (tốt, đó là hình ảnh, nhưng nó quy mô không có vấn đề). Nhưng điều này là khá mới và chưa được hỗ trợ rất rộng rãi (tốt trong tất cả các trình duyệt phong nha (với tiền tố) ngoại trừ IE là chính xác;)).

Một bài viết hay về hình ảnh đường viền trên csstricks.

Browser Support

Answer 5

Hmm bạn có thể tận dụng thủ thuật này ít vào đây để tạo Inset Border Radius

Sau đó, để hỗ trợ minh bạch bạn sẽ phải lẽ thêm khối khác ở giữa. Nhiều hơn hoặc ít hơn giống như cách làm tròn hình ảnh cũ được sử dụng; có một nhịp cho mỗi góc với hình ảnh trong suốt. Và kéo dài ở hai bên và phía trên để lấp đầy không gian trống. Thay vì sử dụng hình ảnh, bạn có thể sử dụng thủ thuật này để làm điều đó trong CSS.

Answer 6

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>

Ví dụ: http://jsfiddle.net/dVmX3/

Answer 7

Bạn có thể đạt được điều này bằng cách hoàn toàn định vị các yếu tố hình tròn trong suốt ở các góc với bóng hộp. Tôi đã sử dụng kết hợp các div bị tràn ẩn chứa các nhịp, hộp bóng, đường viền và bộ chọn giả.

Kiểm tra example của tôi.

Đây là HTML cơ bản và CSS bạn cần để bắt đầu:

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;} 
 

 
a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;} 
 
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;} 
 

 
a div:first-of-type {left: -14px;} 
 
a div:first-of-type:after {left:0;} 
 

 
a div:last-of-type {right: -14px;} 
 
a div:last-of-type:after {right:0;} 
 

 
a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;} 
 

 
a div:first-of-type span {left:-20px;} 
 
a div:first-of-type span:first-child {top:-20px;} 
 
a div:first-of-type span:last-child {bottom:-20px;} 
 

 
a div:last-of-type span {right:-20px;} 
 
a div:last-of-type span:first-child {top:-20px;} 
 
a div:last-of-type span:last-child {bottom:-20px;}

<a href=""> 
 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 

 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</a>

Answer 8

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>