私はあなたがそれのjavascriptを必要としないことを知っています...しかし、スクリプトは「内部要素」を処理する必要があります.
たとえば、div に画像を貼り付けると、CSS3 では角が丸くなりません。JQuery スクリプトでこれを処理できますか?
私はあなたがそれのjavascriptを必要としないことを知っています...しかし、スクリプトは「内部要素」を処理する必要があります.
たとえば、div に画像を貼り付けると、CSS3 では角が丸くなりません。JQuery スクリプトでこれを処理できますか?
問題が発生する可能性があるため、いくつかの解決策があります。他の解決策より優れているものもあります。
div>img {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
$("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#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"
});
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;
}
div {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
overflow: hidden;
}
あなたがやりたいことをするためのjqueryプラグインがあります、それはここにあります
上にいくつかの良いコメントがありますが、あなたが後の効果を達成するのがどのように良いかを言うために、これはあなたが尋ねたものに答えると思います。
それでも、jquery / javascriptを使用して余分な処理を追加するのではなく、古いブラウザにはcssとグレースフルデグラデーションを使用する必要があります
角の丸い CSS を生成する jQuery UI カスタム テーマを作成できます。
CSS を単独で使用できます。次のクラスを追加します。
.round{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
IE で角丸のサポートを追加するには、CSS3Pie (またはその他のソリューション)を使用できます。
JavaScript は必要ありません (サポートしていないブラウザーに丸い境界線を提供したい場合を除きます)。ただし、コンテナーとイメージの両方に境界線を設定する必要があります。
フィドル: http://jsfiddle.net/rEq4X/
HTML
<div>
<img src="url" />
</div>
CSS
DIV, DIV > IMG{
-moz-border-radius: 16px;
border-radius: 16px;
}