CSS 放射状グラデーションから SVG 放射状グラデーションへ

CSS のように SVG で放射状のグラデーションを作成することは可能ですか http://codepen.io/A973C/pen/hnEaf (信号機のライトのことです).red{background:red;background-image :radial-gradient (茶色、透明);背景サイズ:15px15px;幅:100px;高さ:100px;border-r

P粉308783585 2023-12-11 15:54:09 0  2  572

JavaScript - echartsのヒストグラムのグラデーションカラーの問題

echartsのヒストグラムではグラデーションカラー効果を実現できますが、次のようなグラデーションカラー効果は実現できますか? お答えください。つまり、斜めのグラデーションカラー

三叔 2017-06-12 09:30:45 0  1  897

スクロール可能なグラデーション チャット バブル

この例に示すように、下のグラデーションでスクロールすると変化するグラデーションを持つチャット バブルの白いコンテナーが必要です: ルートの背景が見えるように、chatBubble の背後にある .container の部分を透明にしてみました。 .root{背景色:線形グラデーション(赤、黄);幅:100vw;高さ:100vh;}.container{幅:100%;高さ:

P粉197639753 2023-09-01 11:52:18 0  2  631

同じ要素に 2 つの線形グラデーション背景を追加する方法 - Tailwind チュートリアル

Tailwind の 1 つの要素に 2 つの線形背景を追加することはできますか?有効な CSS コードは次のとおりです:background-image:linear-gradient(toright,#f8fafb50%,#16161650%),linear-gradient(toright,#16161650%,#f8fafb50%); 次のように 2 回追加してみました。 ="bg-gradient-to-rfrom-w

P粉561438407 2024-03-27 08:57:02 0  1  407

CSS の背景のグラデーションがページ全体をカバーしません (スクロール可能なコンテンツを含む)

HTML ドキュメントの CSS 背景のグラデーションで問題が発生しています。線形グラデーションを背景として使用し、body要素に設定するページをデザインしました。私が直面している問題は、スクロールするコンテンツがまだあるにもかかわらず、グラデーションが最初に画面が終了する場所で終わっているように見えることです。したがって、下にスクロールすると、グラデーションの 2 番目のインスタンスが最初から始まっているように見えます。これは私の現在の CSS (SCSS) コードです: @importurl('https://fonts.googleapis.com/css2?family=Poppins...

P粉506963842 2023-09-12 13:20:09 0  2  651

css - 線形グラデーションが無効なのはなぜですか?

背景色: Linear-gradient(tobottom, #fc8291, #fa213b); このコード行は Chrome と Firefox では無効であり、背景色: red は正常に表示されます。なぜ？

为情所困 2017-05-16 13:38:09 0  1  1612

境界線の半径を指定してグラデーション境界線を作成する

以下のCSS：a.btn.white-grad{background:$lgrey;color:#313149! important;border:1pxsolid#000;border-image-source:linear-gradient(toright,#9c20aa,#fb3570) ;border-image-slice:20;float:left;@includefont-size(

P粉930448030 2023-08-13 16:23:14 0  2  425

CSSを使用してグラデーションアニメーションを作成する方法

複数の色のグラデーションを滑らかに動かしたいのですが、問題はアニメーションが滑らかではないことです。ステップごとに位置が変わるだけです。 <スタイル>.animated{幅:300px;高さ:300px;ボーダー:1pxsolidblack;アニメーション:gra5sinfinite;アニメーションの方向:逆;-webkit-animation:gra5sinfinite;-web

P粉909476457 2023-09-18 09:47:10 0  2  739

テーパーグラデーションアニメーションのスムーズな色の遷移を実現するにはどうすればよいですか?

先細りのグラデーションをアニメーション化していますが、色の変化が十分に滑らかではありません。さまざまな記事を参照しましたが、正しく再現できません。コードはここにあります: <style>body{min-height:100vh;display: flex ;align-items:center;justify-content:center;}.pyramid{width:500px;height:500px;background-image:coni

P粉285587590 2023-09-01 16:37:22 0  1  489

1 色で描かれたテキストからアニメーション化されたグラデーションにスムーズに移行することは可能ですか?

ページ上に白いテキストがあり、その下にボタンがあります。さらに、アニメーション化されたグラデーションがテキストを埋めるために適用されます。ボタンをクリックすると、-webkit-text-fill-color プロパティが透明になり、テキストの色がグラデーションに合わせて突然変わります。次のように: https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ 白からグラデーションへのスムーズな移行を実現することは可能ですか? (-webkit-text-fill-color 属性はトランジットを直接サポートしません

P粉762447363 2023-09-16 09:22:05 0  1  786

線形グラデーションが明るい/暗いテーマの変数で機能しない

私は個人の Web サイト - https://cooperativedoilylivedistro.elliott23.repl.co - に取り組んでいます。好みに応じて明るいテーマと暗いテーマがあります。問題は、線形グラデーションを変数に設定すると機能せず、背景全体が白になってしまうことです。それがHTML、CSS、JSです。何が起こっているのか知りたい場合は、ブラウザで Web サイトをチェックしてください。 <!DOCTYPEhtml><htmllang="en"&

P粉190443691 2024-03-29 13:28:10 0  1  328

javascript - vue-echarts-v3 を使用すると、折れ線グラフ領域がグラデーション色になります。

これは私のチャートデータです。赤い部分をグラデーションカラーにしたいです。 visualMap メソッドを使用しましたが、希望する効果を実現できません。 new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ {code...} を使用する場合、プロジェクトにあまり多くのリソースを導入したくないので、...

我想大声告诉你 2017-05-16 13:36:11 0  2  1581

書き直されたタイトルは次のとおりです: HTML でグラデーションの背景を持つ自動入力スライダーを作成する方法

私はちょうど HTML をいじっていて、グラデーションで塗りつぶされるスライダーを作成したいと思っていますが、これはほぼ不可能であることがわかりました。数時間調査しましたが、答えが見つからないようです。 JSが必要だと思いますが、そこは完全に空白です。 .slidecontainer{justify-content:center;bottom:0px;margin-left:auto;}.slider{-webkit-Appearance:none;Appearance:none;borde

P粉715228019 2024-02-03 20:57:38 0  2  467

-webkit-mask内でRadial-gradientを使用して3つの透明な穴を作成しますが、画像は保持します

私はプロジェクトに取り組んでおり、透明にするために境界線にランダムな穴を3つ開ける必要があるdivを作成する必要があります。私が直面している問題は、2つの穴に対して、放射状のグラデーションで -webkit-mask を使用して、20ピクセルの2つの透明な穴を作成していることです。私の質問は、3番目の穴を作成しようとするとき、これを行う方法を知っている人はいますか? <divid="pulseAd"class="fadeInUpanimated"style="表示

P粉810050669 2023-09-02 21:32:42 0  2  632

境界線のグラデーションは境界線の半径と互換性がありますか?

丸い境界線 (border-radius) を使用して入力ボックスをスタイルし、境界線にグラデーション効果を追加しようとしています。グラデーションと丸い境界線は正常に作成できますが、両方を同時に作成することはできません。丸い角はあるがグラデーションがない、またはグラデーションはあるが丸い角がないかのどちらかです。 -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(linear,00,0100%,from(#b0bbc4),to(#ce

P粉824889650 2023-08-21 20:39:38 0  2  474

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

円形の境界線（境界線の半径）を持つ入力フィールドを設計し、その境界線にグラデーションを追加しようとしています。グラデーションと円形の境界線は正常に作成できますが、どちらも連携できません。グラデーションのない丸い角、またはグラデーションはあるが角が丸い境界線のいずれかです。 -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  526