7

角を丸くすることに問題があります。左側を数ピクセル切り取りたいと思っています。以下は私が使用しているコードです。数字を増やしたり減らしたりしてみました。ラッパーを追加しました。検索で見つけられるさまざまな解決策をすべて試しましたが、それでもうまくいきません。あまり器用じゃないみたいなので誰か手を貸してくれませんか？そして、どうやら私はそれがどのように見えるかの写真を投稿することもできないようです.

<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>
4

4 に答える 4

1

border-radiusスペックが出たときも同じ問題がありました。タグに追加する必要がborder-radiusあることがわかりました。次に、のプロパティ<img>を保持または削除できます。<div>border-radius

于 2012-11-30T15:20:47.020 に答える
0

基本的に、この便利なツールを使用すると非常に役立つジェネレーターである、ネストされた丸みを帯びたコーナーを処理する必要があります。

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

于 2012-12-04T13:02:36.647 に答える
0

この問題は、次の css を使用して解決できました。これは私のサイトで機能しました。問題の解決に役立つことを願っています. それがあなたが欠落している議論であるかどうかはわかりません。

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

}

于 2012-12-12T21:54:15.997 に答える
0

これを試すことができます： 

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); 
}
于 2012-12-06T02:13:27.640 に答える