feat: 添加blend-mode

src/components/Card.vue

@@ -27,7 +27,9 @@ img {
 <style lang="scss" scoped>
 .container {
   .hover-tilt {
-    &::part(tilt) {
+
+    &::part(tilt),
+    &::part(container) {
       &::before {
         border-radius: var(--border-radius, 0px);
         overflow: hidden;

src/const/editor.ts

@@ -1,7 +1,7 @@
 const editorConfig = [
 	{
 		label: "border-radius",
-		value: 0,
+		value: 10,
 		params: {
 			min: 0,
 			step: 1,

src/const/hoverTilt.ts

@@ -56,6 +56,24 @@ export const hoverTiltConfig = [
 			step: 1
 		}
 	},
+	//@see https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Values/blend-mode
+	//   normal       |
+	//   darken       |
+	//   multiply     |
+	//   color-burn   |
+	//   lighten      |
+	//   screen       |
+	//   color-dodge  |
+	//   overlay      |
+	//   soft-light   |
+	//   hard-light   |
+	//   difference   |
+	//   exclusion    |
+	//   hue          |
+	//   saturation   |
+	//   color        |
+	//   luminosity   
+
 	{
 		label: "blend-mode",
 		value: "overlay",
@@ -65,6 +83,18 @@ export const hoverTiltConfig = [
 				"screen": "screen",
 				"multiply": "multiply",
 				'plus-lighter': 'plus-lighter',
+				//--------------
+				"normal": "normal",
+				"darken": "darken",
+				"color-dodge": "color-dodge",
+				"lighten": "lighten",
+				"soft-light": "soft-light",
+				"difference": "difference",
+				"exclusion": "exclusion",
+				"hue": "hue",
+				"saturation": "saturation",
+				"color": "color",
+				"luminosity": "luminosity",
 			}
 		}
 	},
@@ -94,7 +124,7 @@ export const hoverTiltConfig = [
 	//@see https://hover-tilt.simey.me/options/props/#glaremaskmode
 	{
 		label: "glare-mask-mode",
-		value: "outside",
+		value: "none",
 		params: {
 			// 'match-source' | 'luminance' | 'alpha' | 'none' | undefined
 			options: {
@@ -102,7 +132,6 @@ export const hoverTiltConfig = [
 				"luminance": "luminance",
 				"alpha": "alpha",
 				"none": "none",
-				// "undefined": undefined
 			}
 		}
 	}