84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
「反円」と表現される形状を作成したいと考えています。
黒い線が div 要素の外側の境界線に沿って続いているはずなので、画像は多少不正確です。
これは私が現在持っているデモです: http://jsfiddle.net/n9fTF/
画像なしで CSS を使用することはできますか?
CSS
プロットからは、点をどの程度丸くしたいのかはわかりませんが、可能性が 1 つあります。http://jsfiddle.net/n9fTF/6/
先端をもっと丸くする必要がある場合は、スプーンと調和するように先端にいくつかの円を配置する必要があります。
(これをサポートするブラウザ - FF および Chrome - IE10 でテスト済み - Safari も動作するはずです)。
私の最初の答えの「問題」の 1 つは、しっかりした背景がない状況でした。この更新により、同じ効果が作成され、円とその逆のカットアウトの間に透明な「ギャップ」が可能になります。
Z インデックスを適切に機能させるには予想よりも多くの労力がかかりました (これは負の Z インデックスを無視しているようです)、ただしこれにより、見た目がきれいになりました。(IE9、FF、Chrome でテスト済み):
HTML
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
プロットからは、点をどの程度丸くしたいのかはわかりませんが、可能性が 1 つあります。http://jsfiddle.net/n9fTF/6/
先端をもっと丸くする必要がある場合は、スプーンと調和するように先端にいくつかの円を配置する必要があります。
更新: CSS3 放射状背景グラデーション オプション
(これをサポートするブラウザ - FF および Chrome - IE10 でテスト済み - Safari も動作するはずです)。
私の最初の答えの「問題」の 1 つは、しっかりした背景がない状況でした。この更新により、同じ効果が作成され、円とその逆のカットアウトの間に透明な「ギャップ」が可能になります。
フィドルの例を表示します。
CSS
リーリー元の回答
Z インデックスを適切に機能させるには予想よりも多くの労力がかかりました (これは負の Z インデックスを無視しているようです)、ただしこれにより、見た目がきれいになりました。(IE9、FF、Chrome でテスト済み):
HTML
リーリーCSS
リーリー