Angular で円形の SVG 温度ドラッガーを作成しますか?

これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。これは、rinkle-dashoffset="-260" 設定を使用して、親指/ドラッガーを親指の後ろの円形パスの終端近くに配置します。-260 の負のオフセットが期待どおりに機能することがわかります。 <bodystyle="width:200px;height:200px;"><svg(mousedown)="onMouseDo

P粉135799949 2024-04-03 09:33:29 0  1  643

正方形スペース上のMP4ビデオに円形の境界線を追加する方法

正方形スペースのビデオに境界線の半径を追加しようとしていますが、機能しません。誰かこれを行う方法を知っていますか?ビデオに円形の境界線を付けようとして、次のコードを試してみました: #block-df45bbc957de1bd8c905.video-block.video-player{padding-bottom:120%;border-radius:10px;};

P粉781235689 2023-08-31 16:24:14 0  1  593

書き換えられたタイトル: サイズ変更時に固定 HTML の正方形または円要素を水平方向および垂直方向に中央揃えにします。

水平方向と垂直方向にさまざまなサイズの正方形または円の固定 HTML 要素を中央に配置するにはどうすればよいですか?この難しさは、幅と高さを等しく保つ必要があるという事実から生じると思います。

P粉455093123 2024-04-04 12:31:51 0  1  457

透明な半円の切り抜きのある Div

CSS3だけで半円の透明な切り抜きを作りたいと思っています。唯一の要件は、形状を形成するすべての要素が黒または透明であることです。半円は透明で背景が透けて見える必要があるため、黒い長方形の上に白い円を置くことはできません。必要な形状:

P粉022285768 2023-10-22 17:51:09 0  2  768

グラデーションのある境界画像に境界半径を使用できますか?

円形の境界線（境界線の半径）を持つ入力フィールドを設計し、その境界線にグラデーションを追加しようとしています。グラデーションと円形の境界線は正常に作成できますが、どちらも連携できません。グラデーションのない丸い角、またはグラデーションはあるが角が丸い境界線のいずれかです。 -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(linear,00,0100%,from(#b0bbc4),to(#ced9de))

P粉633733146 2023-08-29 12:52:01 0  2  564

SafariでCSSを使用して円形の<ボタン>に円形のアウトラインを取得する方法

同じ色の輪郭を持つ丸いボタンを取得しようとしていますが、それは不可能のようです。輪郭は常に正方形になります。これを a で実現する方法はありますか、それとも a でのみ実現できるのでしょうか?ボタン{幅:40px;高さ:40px;境界線:なし;境界線の半径:40px;カーソル:ポインター;背景色:黒;表示:継承;アウトライン:5pxsol

P粉066725148 2023-10-26 09:54:54 0  2  1050

CSS を使用して画像に複数の透明なオーバーレイを追加する方法

三角形を押して白い円の上にコンテンツを含めるにはどうすればよいですか?画像の一部として 3 つのオーバーレイ形状を含む背景画像を使用してヒーロー セクションを作成する解決策を見つけようとしています。オーバーレイの上には h1、p、btn が表示されます。デザインがどのように見えるかを示すスクリーンショットを以下に示します。次の 3 つのオーバーレイがあります。 下部の透明度が 0% の直角形状。透明度のある外側の円。透明感のある内側の円。これが私がこれまでに持っているものです。以下にスニペットを示しました。Codepen には実用的なバージョンもあります。サークルの位置は

P粉777458787 2024-02-25 17:09:14 0  1  461

3 つの SVG ファイルをページ上で中央揃えにするにはどうすればよいですか?

3 つの個別の SVG ファイルがあり、それぞれを重ね合わせるとグラフィックが作成されます。最初の SVG ファイルは赤い三角形、2 つ目は三角形の内側にある青い円、3 つ目は三角形の底辺にある紫色の長方形です (三角形と長方形の間には少しスペースがあります)。私の目標は、3 つの SVG ファイルすべてをページの中央に重ねて配置することです。以下は私の HTML と CSS コードです。 *{マージン:0;パディング:0;ボックスサイズ:ボーダーボックス;}.graphic{高さ:1

P粉998100648 2023-09-07 14:20:58 0  2  631

画像から円形の部分を切り出す: ステップバイステップガイド

SVG パスを使用して画像をクリップしようとしていますが、画像が適合していないようです。これが私が達成したいことです： これが私が得たものです： これは私が試したコードです： .topbar-chat-img{width:48px;height:48px;object-fit:cover;clip-path:url( #topbar -img-svg);}<imgsrc="https://picsum.photos/200/200?image

P粉536909186 2023-12-28 10:48:37 0  1  526

Safari は円形アバターの CSS をサポートしていません

私のブログは gatsbyReact テンプレートを使用していますが、Safari (iPhone または Mac) で開くとアバター画像が丸くなりません。 Simple Code Blog これは私がアバターに使用するスタイルです。 bio-avatar{margin-right:var(--spacing-4);margin-bottom:var(--spacing-0);min-width:50px;border - 半径:100%;}

P粉779565855 2024-02-17 18:38:55 0  1  496

Ctrl+shift+J を押しても空が切り取られませんでした。なぜですか?

多角形なげなわツールを使用して円を描いた後、CTRL+J を押します。結果は、元の画像が切り取られることなく、選択したレイヤーのコピーだけになります。何が起こっているのか説明してください。設定した場所ですか? 。

P粉693705174 2022-09-08 23:07:16 0  0  852

特別なカーソルを使用してホバー時にテキストを変更します

monopo の Web サイトと同様に、ホバー時にテキストを変更する方法を教えてください。背景なんて必要ないんです。必要なのは、単純な円形の効果 (色付きの背景など) とテキストの変更だけです。また、できれば「about」という名前のdiv内でのみエフェクトが有効になるようにしたいです。ウェブサイトリンク：https://monopo.london/

P粉665427988 2023-09-05 23:47:42 0  1  564

JavaScript - フラットリスト ドロップダウン コンポーネント スタイルをカスタマイズするにはどうすればよいですか?

1. まず、達成したい効果について説明します。携帯電話で JD.com のような画像をプルダウンし、手を放した後、新しいページにジャンプします。 2. ただし、フラットリストにはデフォルトのドロップダウン イベント {code...} があります。ドキュメント内のこのヘッダー コントロールを変更する方法がわかりません。Android のデフォルトでは、黒い円形の更新コンポーネントが設定されています...

PHP中文网 2017-06-08 11:02:39 0  1  1336

書き換えられたタイトルは次のとおりです: CSS 3 図形: 「Reverse Circle」または「Cut Circle」

「逆円」と表現される形状を作成したいと考えています。黒い線が div 要素の外側の境界線に沿って続く必要があるため、画像は多少不正確です。現在私が持っているデモは次のとおりです: http://jsfiddle.net/n9fTF/ 画像なしで CSS を使用することは可能ですか?

P粉979586159 2023-08-24 18:26:55 0  2  448

子 div の左マージンが負であるため、親 div を中央に配置できません。

次の div を作成しましたが、負の左マージンを使用してアイコンをオフセットしているため、div 全体を中央に配置できません。デスクトップでは div 全体が少し左に移動していることは簡単には分からないので問題なくできますが、モバイルでは円形のアイコンの左側が切り取られます。 div全体を中央に配置するにはどうすればよいですか? .icon-text-box{border:1pxsolidred;}.icon-box{background:#fff;border-radius:33px;margin:6remauto

P粉677573079 2024-01-29 15:04:54 0  1  514

CSS Clip-path:circle() プロパティを使用して画像の周囲に円形の境界線を作成します

画像に枠線を追加する方法を知りたいですclip-path:circle(); 他に枠線を追加する方法はありますか？例: border: 5px ソリッドレッド; 私はこれを試しました: .roundedimage{width:200px;clip-path:circle();}<imgsrc="images/tv.jpg"alt="roundedImage" class="roundedimag

P粉875565683 2024-03-31 17:35:30 0  1  550

ターンテーブル上のガラスファサードの動きをシミュレートする、左から右に近づいたり遠ざかったりする CSS アニメーション

正面から見たときのターンテーブル プレート上のガラスの動きをシミュレートし、近づいたり遠ざかったりしながら左から右に水平に移動する CSS アニメーションを作成しようとしています。近づいていますが、まだ正しく見えません。現在、円ではなくひし形に沿って移動しているように見えます。これが私が試したことです... roll{display:block;width:100px;height:100px;background:red;margin:10pxauto10pxauto;animation:ro

P粉208469050 2023-09-04 21:59:55 0  1  566

CSS で x% が赤、残りが白の円形の境界線を作成する方法 (x は JavaScript ファイルの状態変数)。

最初はタイマーの残り時間を白い枠で囲むタイマーアプリを作成しています。タイマーの残り時間を囲むリングが徐々に赤くなり、タイマーがなくなると完全に赤くなるようにしたいと思います。 {残り時間.時間}:{残り時間.分}:{残り時間.秒}。クー

P粉482108310 2023-07-24 18:47:03 0  1  507

画像をトリミングして移動します。グリッドレイアウト

画像を正しい位置に配置し、上下をトリミングするのに苦労しています。これは次のようになります (ヒーロー部分): https://www.behance.net/gallery/161732057/CozyMornings-online-store プロジェクト全体はグリッド上に構築されます。円形の画像を左に移動し、コンテナより大きく、上下をトリミングする必要があります。さらに、応答性が高い必要があります。画像をパッケージに入れようとしています。このラッパーに相対位置を与え、オーバーフローを非表示にします。これではありません

P粉548512637 2023-09-15 19:18:46 0  1  621

教えてください。コード内の長方形の幅と高さが円よりも​​大きいのですが、なぜ長方形が中央に配置されているのでしょうか?

　 2017-12-17 14:04:07 0  0  999