1

それらに関するドキュメントを見たことがないので、おそらく存在しないでしょうが、常に確認することをお勧めします。

真の円形 (または長方形以外の多角形) 要素を探しています。キャンバスに円を描くことはできますが、キャンバスはまだ長方形です。border-radius を使用して円を描くことはできますが、それでも角がかなり丸い正方形の要素です。

クリック可能な領域が非常に正確な複雑な形状のボタンを作成する (簡単な) 方法を探しています。

私の現在の方法は、JavaScript を使用し、クリックをリッスンして位置を測定することです。これが html5/css3 で処理されると、より理想的です。

4

3 に答える 3

2

さて、すべての要素は、何らかの形のブロック、正方形、または長方形として始まります。それ以外では、CSS を使用してブロックを操作し、円として表示します。ただし、すべてのブラウザーがこれを完全にサポートしているわけではありませんが、本質的に心配しなければならないのはほとんどが古いブラウザーです。

古いものと新しいものを 100% 互換性のあるものを探している場合は、http://pixlr.comで描画し、イメージ タグを使用できます。あなたが行くどのルートでも、その概念を逃れることは本当にありません。

概して..

<div class="full-circle"></div>

.full-circle {
 background-color: #c06;
 border: 3px solid #333;
 height: 150px;
 border-radius:75px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

現在の方法に関する限り、それがほとんどの場合唯一のもっともらしいロジックです。「規範」の外で何かを行うには、通常、1行または3行のコードよりも少し多くの作業が必要です。

于 2012-10-26T17:05:32.097 に答える
2

Border-radius は、要素を丸く見せるだけです (報告によると、Firefox を除く)。

マップは一種の作業ですが、画像を強制することは避けたいです。

SVG は機能しますが、リンクが機能するには JavaScript が必要なため、まだ純粋な html/css ではありません。SVG 要素も正方形のままですが、内部の形状は JavaScript イベントに適切に応答する要素です。したがって、100% 完璧ではありませんが、実行可能です。

キャンバス内に描画するだけでなく、ページ上の要素の形状を制御できる機能があれば、間違いなくもっとクールになるでしょう。たぶん、キャンバス内にサイト全体を構築して遊んでみます...

提案をありがとう！

于 2012-10-29T16:27:13.700 に答える
1

真に円形の要素はありませんが、通常のボックス要素を使用し、CSS3 仕様を使用してみてくださいborder-radius。例えば：

border-radius: 50px;
height: 50px;
width: 50px;
overflow: hidden;

これにより、実質的に円形の要素が作成され、Firebug は要素の上にカーソルを置いたときに曲線の形を尊重します。

于 2012-10-26T17:09:08.040 に答える