ホームページ >ウェブフロントエンド >jsチュートリアル >超使いやすいjQuery角丸プラグイン Corner Quick_jquery
超使いやすいjQuery角丸プラグイン Corner Quick_jquery
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 16:38:201369ブラウズ
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>