jQuery Corner は、もともと Dave Methvin によって開発された jQuery プラグインですが、Comrade Malsup の支援により、いくつかの重要な改良が加えられました。このプロジェクトは現在 github に公開されています。もちろん、便宜上、この記事ではプラグインを添付ファイルとして提供しますが、最新バージョンを入手したい場合は、プロジェクトの github にアクセスしてください。
丸い角やその他のスタイルが魔法のように見える理由は、プラグインがターゲット要素にいくつかの小さなストリップを追加するためです。そのため、人間の目には丸い角しか見えませんが、実際には小さいものです。元の直角を覆います。
どうやら私はマジシャンではないようで、始めてすぐに経歴を暴露してしまいました。心配しないでください。この魔法の要件をいくつか追加しましょう:
1. プラグインはブロック要素に特化して作成されているため、div、p などは適用できますが、inline 要素がまったく使用できないわけではありません。スパンにコーナーを追加するとコストが高くなります。ただし、span の角が丸いことに普通の人は異論を唱えないので、span を div に変更するだけです。
2. プラグインにより新たに追加されたborder-radius機能について、IE
OK、基本的なポイントは紹介されました。みんなに使い方を教えてください。これが重要なポイントですが、とても簡単です。 最初のステップは、基本的な HTML Web ページ、DIV レイアウト、および CSS を構築することです。
<html> <head> <style type="text/css"> div{ width:350px; height:200px; background-color: #6af; } </style> </head> <body> <div></div> </body>