cắt góc tròn

Question

Tôi gặp sự cố với các góc làm tròn, chúng tiếp tục cắt ở phía bên trái một vài pixel. Dưới đây là mã tôi đang sử dụng. Tôi đã thử tăng số và giảm số; Tôi đã thêm một trình bao bọc; Tôi đã thử tất cả các giải pháp khác nhau mà tôi có thể tìm kiếm, nhưng nó vẫn bị cắt. Bất cứ ai có thể cho tôi một bàn tay vì tôi không có vẻ rất tiện dụng? Và dường như tôi cũng không thể đăng hình ảnh của nó.

<style> 
.image 
{ 
    width: 200px; 
    position:relative; 
    -webkit-border-radius: 14px; 
    -moz-border-radius: 14px; 
    -khtml-border-radius: 14px; 
    border-radius: 14px; 
    overflow: hidden; 
} 

#slideshow 
{ 
    margin:0 0 0 0; 
    position:relative; 
    width:200px; 
    height:133px; 
    padding: 10px; 
    overflow:hidden; 
    -webkit-border-radius: 14px; 
    -moz-border-radius: 14px; 
    -khtml-border-radius: 14px; 
    border-radius: 14px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.3); 
} 

#slideshow > div 
{ 
    position:absolute; 
} 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

<script> 
$(function() { 
    $("#slideshow > div:gt(0)").hide(); 
    setInterval(function() 
    { 
     $('#slideshow > div:first') 
      .fadeOut(2000) 
      .next() 
      .fadeIn(2000) 
      .end() 
      .appendTo('#slideshow'); 
    }, 3000); 
}); 
</script> 


<div id="slideshow"> 
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div> 
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div> 
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div> 
</div> 

Answer 1

Tôi gặp vấn đề rất giống với thông số border-radius xuất hiện. Hóa ra bạn phải thêm border-radius vào thẻ <img>. Sau đó, bạn có thể giữ hoặc xóa thuộc tính border-radius của <div>.

Answer 2

Về cơ bản, bạn cần phải xử lý các góc được làm tròn lồng nhau được tạo công cụ hữu ích với công cụ hữu ích này.

http://joshnh.com/tools/get-your-nested-border-radii-right.html

Answer 3

Bạn có thể thử này:

div.circle 
{ 
    width: 10px; 
    height: 10px; 
    background: white; 
    border-radius: 28px; 
    -moz-border-radius: 64px; 
    -webkit-border-radius: 64px; padding:32px; 
    border: 2px black; 
    color:white; 
    text-align:center; 
    -webkit-box-shadow: 0 0 1px rgb(255,0,0); 
    -moz-box-shadow: 0 0 1px rgb(255,0,0); box-shadow: 0 0 1px rgb(255,0,0); 
} 

Answer 4

tôi đã có thể để giải quyết vấn đề này bằng cách sử dụng css sau. Điều này đã làm việc trên các trang web của tôi, tôi hy vọng nó có thể giúp bạn với vấn đề của bạn. Không chắc chắn nếu đó là một đối số bạn đang bỏ lỡ hay không.

.classname { 
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
box-shadow:inset 0px 1px 0px 0px #ffffff; 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
background-color:#ededed; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
border:1px solid #dcdcdc; 
display:inline-block; 
color:#777777; 
font-family:arial; 
font-size:15px; 
font-weight:bold; 
padding:6px 24px; 
text-decoration:none; 
text-shadow:1px 1px 0px #ffffff; 

}