0

私はあなたがそれのjavascriptを必要としないことを知っています...しかし、スクリプトは「内部要素」を処理する必要があります.

たとえば、div に画像を貼り付けると、CSS3 では角が丸くなりません。JQuery スクリプトでこれを処理できますか?

4

6 に答える 6

3

問題が発生する可能性があるため、いくつかの解決策があります。他の解決策より優れているものもあります。

div 内の要素は角を丸くする必要があります。

CSSのみ

div>img {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

CSSを適用するjQuery

$("div#id>*").css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

または

$("div#id").children().css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

最後の子には、div 内の角を丸くする必要があります

CSSを適用するjQuery

$("div#id:last-child").css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

または：

$("div#id").children(':last').css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

CSSのみ

div>*:last {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

または

div:last-child {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

中身の角を切り取る箱。

CSSのみ

div {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
}
于 2012-05-11T11:47:35.240 に答える
0

あなたがやりたいことをするためのjqueryプラグインがあります、それはここにあります

上にいくつかの良いコメントがありますが、あなたが後の効果を達成するのがどのように良いかを言うために、これはあなたが尋ねたものに答えると思います。

それでも、jquery / javascriptを使用して余分な処理を追加するのではなく、古いブラウザにはcssとグレースフルデグラデーションを使用する必要があります

于 2012-05-11T12:18:28.683 に答える
0

角の丸い CSS を生成する jQuery UI カスタム テーマを作成できます。

jQuery UI - テーマローラー

于 2012-05-11T11:43:35.177 に答える
0

CSS を単独で使用できます。次のクラスを追加します。

.round{
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
}

IE で角丸のサポートを追加するには、CSS3Pie (またはその他のソリューション)を使用できます。

于 2012-05-11T11:40:29.823 に答える
0

JavaScript は必要ありません (サポートしていないブラウザーに丸い境界線を提供したい場合を除きます)。ただし、コンテナーとイメージの両方に境界線を設定する必要があります。

フィドル: http://jsfiddle.net/rEq4X/

HTML

​<div>
    <img src="url" />
​&lt;/div>​​​​​​

CSS

DIV, DIV > IMG{
 -moz-border-radius: 16px;
 border-radius: 16px;   
}
于 2012-05-11T11:51:36.917 に答える