如何将Sketch生成的矩形径向渐变转换为JavaFX CSS？

I get it, translating between Sketch's CSS and JavaFX's CSS can be tricky since their radial gradient syntaxes are structured differently. Let's break this down step by step for your specific example.

First, Understand the Sketch Gradient #

Your Sketch-generated CSS for the gradient is:

background-image: radial-gradient(50% 108%, #40ADFF 50%, #1D94ED 100%);

Here's what each part means in Sketch's context:

• 50% 108%: The center point of the radial gradient (50% across the element's width, 108% down its height—so the center sits slightly below the bottom edge of the element).
• #40ADFF 50%: The light blue color starts at 50% of the gradient's radius.
• #1D94ED 100%: The darker blue ends at 100% of the gradient's radius (the edge of the gradient area).

Map to JavaFX's Radial Gradient Syntax #

JavaFX's radial-gradient uses a different parameter order and requires explicit keywords for some values. The key differences here are:

• You need to explicitly define the center position using the center keyword.
• You must specify the gradient's radius (Sketch defaults to the farthest corner, which translates to radius 100% for most cases).

Corrected JavaFX CSS for Your Button #

Here's the full converted stylesheet, including the border and shadow:

#myBtn {
    /* Radial gradient matched to Sketch's settings */
    -fx-background-color: radial-gradient(center 50% 108%, radius 100%, #40ADFF 50%, #1D94ED 100%);
    /* Converted border from Sketch */
    -fx-border-width: 5px;
    -fx-border-color: #1081D7;
    /* Converted box-shadow to JavaFX's dropshadow effect */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.49), 4, 0, 6, 2);
}

Let's Break Down Each Part: #

• Radial Gradient: center 50% 108% matches Sketch's gradient center position exactly. radius 100% ensures the gradient extends to the farthest edge of the element, just like Sketch's default behavior. The color stops (#40ADFF 50%, #1D94ED 100%) are identical to Sketch's.
• Border: Sketch's border: 5px solid #1081D7 splits into two JavaFX properties: -fx-border-width for the thickness, and -fx-border-color for the color.
• Box Shadow: JavaFX uses -fx-effect: dropshadow() instead of box-shadow. The parameters here map directly to Sketch's values:
  • gaussian: The shadow type (matches Sketch's default).
  • rgba(0,0,0,0.49): The shadow color and opacity.
  • 4: The blur radius (matches Sketch's 4px).
  • 0: The spread value (Sketch's 1px spread isn't directly supported, but 0 works for most cases here—adjust if needed).
  • 6: The horizontal offset (matches Sketch's 6px).
  • 2: The vertical offset (matches Sketch's 2px).

Testing Tips #

If the gradient doesn't look exactly like Sketch, you might need to tweak the radius value slightly (try 110% instead of 100% since the center is below the element). JavaFX's gradient calculation is a bit different, so small adjustments are normal.

内容的提问来源于stack exchange，提问作者wizeOnes