गोलाकार कोनों क्रॉपिंग

Question

मुझे गोल कोनों के साथ समस्याएं आ रही हैं, वे बाएं तरफ कुछ पिक्सेल से फसल फेंकना चाहते हैं। नीचे वह कोड है जिसका मैं उपयोग कर रहा हूं। मैंने संख्याओं को कम करने और संख्या घटाने की कोशिश की है; मैंने एक रैपर जोड़ा है; मैंने खोज के लिए पा सकते हैं कि सभी अलग-अलग समाधानों की कोशिश की है, लेकिन यह अभी भी फसलों को बंद कर देता है। क्या कोई मुझे हाथ दे सकता है क्योंकि मुझे बहुत आसान नहीं लग रहा है? और स्पष्ट रूप से मैं एक तस्वीर पोस्ट नहीं कर सकता जो यह दिखता है।

<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

मैं बहुत ही समस्या थी जब border-radius कल्पना बाहर आया था। बाहर निकलता है आपको <img> टैग में जोड़ना होगा। फिर आप या तो <div> की border-radius संपत्ति को रख या हटा सकते हैं।

Answer 2

अनिवार्य रूप से आपको नेस्टेड गोलाकार कोनों से निपटने की आवश्यकता है जो इस उपयोगी टूल के साथ काफी मददगार जनरेटर हैं।

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

Answer 3

आप इस कोशिश कर सकते हैं:

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

मैं निम्नलिखित सीएसएस का उपयोग कर इस समस्या को हल कर लिया है। इसने मेरी साइटों पर काम किया है, मुझे उम्मीद है कि यह आपकी समस्या से आपकी मदद कर सकता है। सुनिश्चित नहीं है कि यह एक तर्क है कि आप गायब हैं या नहीं।

.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; 

}