HTML&CSS： 日落卡片

效果演示

这段代码创建了一个包含日落图像和文本的美观卡片，使用了现代CSS背景模糊和渐变，以及SVG图形来增强视觉效果。

HTML

<div class="card">
  <div class="card__content">
    <div class="card-details">
      <p class="text-title">Savor the sunset</p>
      <p class="text-body">Enjoy life's little beauties</p>
    </div>
    <svg class="sunsetsvg" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1312.000000 876.000000" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="MyGradient" gradientTransform="rotate(90)">
          <stop offset="5%" stop-color="#ff632a"></stop>
          <stop offset="95%" stop-color="#ffd900"></stop>
        </linearGradient>
      </defs>
<g transform="translate(0.000000,876.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M12900 7865 c0 -12 19 -15 110 -15 91 0 110 3 110 15 0 12 -19 15
-110 15 -91 0 -110 -3 -110 -15z"></path>
<path d="M10710 7525 c-148 -33 -310 -142 -413 -277 -65 -86 -101 -154 -137
-261 l-27 -79 -6 76 c-9 101 -23 156 -62 242 -83 183 -220 240 -381 160 -74
-37 -149 -99 -140 -115 4 -5 22 -5 48 2 24 6 61 11 83 11 l40 1 3 -45 c6 -100
15 -107 79 -60 22 16 42 27 45 24 3 -3 3 -33 1 -67 l-5 -62 43 -15 c33 -11 50
-26 71 -60 26 -43 82 -214 75 -233 -1 -5 -20 16 -40 46 -21 31 -77 93 -125
139 -200 193 -380 279 -517 249 -130 -29 -289 -177 -370 -346 -41 -84 -82
-211 -72 -222 3 -2 27 32 53 77 50 84 169 210 198 210 21 0 20 -25 -4 -102
-22 -71 -25 -98 -9 -98 5 0 62 49 125 110 96 92 173 150 199 150 12 0 3 -30
-20 -64 -14 -20 -25 -40 -25 -44 0 -4 60 -7 133 -7 l133 0 74 -37 c71 -36 170
-109 125 -93 -154 57 -197 68 -281 72 -76 5 -102 2 -155 -16 -112 -37 -227
-131 -271 -220 -20 -40 -23 -65 -26 -186 -3 -125 8 -248 24 -264 10 -11 22 22
29 82 8 75 47 200 77 247 l22 35 7 -30 c4 -16 7 -53 8 -82 0 -28 5 -54 10 -57
14 -9 41 70 53 158 6 44 14 85 18 90 5 4 16 -8 25 -28 10 -20 23 -36 30 -36 7
0 23 21 35 46 14 27 43 62 73 86 51 40 69 39 47 -2 -6 -12 -10 -24 -7 -26 3
-3 32 2 65 10 34 9 97 16 143 15 l84 -1 -73 -13 c-106 -20 -174 -55 -246 -128
-93 -92 -138 -192 -155 -344 -9 -87 0 -220 20 -281 19 -59 56 -128 90 -167 33
-37 66 -48 54 -17 -18 48 -35 132 -35 178 0 98 19 108 76 39 20 -25 40 -42 44
-38 4 4 3 42 -3 83 -12 84 1 221 26 280 l14 35 8 -40 c13 -74 25 -110 47 -145
l22 -35 13 85 c13 84 39 178 53 193 4 4 10 -30 13 -76 6 -87 35 -190 67 -242
l19 -29 -1 119 c0 103 3 131 25 200 31 94 72 162 119 199 55 41 46 52 118
-147 78 -214 160 -553 199 -822 49 -335 55 -441 55 -880 0 -368 -3 -446 -23
-630 -20 -187 -86 -624 -96 -634 -2 -2 -37 5 -77 15 -107 28 -277 26 -340 -3
-76 -35 -113 -69 -177 -163 -57 -83 -97 -119 -148 -134 -19 -6 -23 -2 -27 26
-67 410 -120 611 -247 934 -88 224 -265 573 -373 737 -26 38 -6 34 52 -12 56
-44 122 -137 148 -208 29 -79 37 -75 32 12 -3 50 -15 108 -31 154 -15 41 -25
77 -23 79 6 5 97 -106 125 -152 44 -71 52 -9 16 134 -6 22 -1 20 33 -17 44
-48 92 -134 117 -211 10 -29 20 -50 24 -47 3 4 13 27 22 53 8 25 20 47 27 50
16 5 62 -91 76 -160 6 -32 16 -60 21 -61 33 -7 46 174 19 264 -24 82 -89 199
-143 260 -114 126 -287 179 -431 129 -53 -18 -54 -18 -32 0 27 23 124 60 155
60 12 0 29 4 37 10 12 7 11 12 -5 31 l-20 22 44 -7 c49 -7 96 -29 128 -59 25
-23 30 -17 35 43 l3 35 42 -61 c51 -74 106 -131 111 -115 2 6 -6 36 -19 66
-24 58 -22 73 8 57 26 -14 122 -119 160 -175 18 -26 37 -47 42 -47 22 0 -49
193 -102 276 -52 82 -119 123 -235 144 -141 25 -249 -16 -380 -143 l-85 -82
34 64 c56 107 141 177 257 212 23 7 41 16 40 20 -2 4 -18 18 -37 31 -83 56 4
55 178 -2 68 -22 127 -40 132 -40 20 0 6 25 -41 77 -60 65 -65 88 -17 80 55
-9 142 -46 207 -88 34 -22 65 -37 68 -34 4 3 -32 43 -78 88 -61 59 -106 93
-160 119 -149 74 -294 87 -384 34 -119 -70 -252 -308 -290 -521 l-13 -70 -14
60 c-7 33 -14 95 -14 137 0 71 2 79 29 107 l29 30 -27 45 c-14 24 -26 47 -26
51 0 3 22 3 49 -1 27 -3 51 -2 54 3 3 5 -3 28 -14 52 -10 24 -19 49 -19 56 0
14 39 29 103 41 83 14 -4 52 -123 53 -166 2 -258 -129 -230 -325 9 -68 37
-160 61 -206 7 -12 -27 14 -75 60 -141 132 -306 202 -481 202 -94 0 -157 -15
-240 -58 -68 -35 -133 -86 -123 -97 4 -4 44 2 90 14 102 26 232 38 242 23 4
-6 -16 -25 -46 -45 -61 -39 -89 -67 -67 -67 8 0 60 10 116 22 57 12 106 18
110 15 3 -4 -6 -20 -21 -36 l-28 -29 93 0 c114 1 195 -19 302 -74 84 -44 99
-61 24 -28 -96 43 -196 61 -327 62 -196 1 -340 -32 -453 -106 -60 -39 -122
-95 -114 -102 3 -3 28 3 56 12 27 10 53 15 57 11 4 -4 -15 -33 -43 -64 -61
-71 -81 -107 -93 -175 -11 -57 -4 -139 14 -164 11 -14 17 -3 44 68 35 93 82
151 116 146 15 -2 25 -16 37 -50 8 -26 18 -50 21 -54 4 -3 12 21 18 53 13 62
35 113 49 113 5 0 21 -16 35 -35 15 -19 30 -35 34 -35 4 0 24 26 44 58 27 42
50 66 87 85 65 36 189 67 265 67 l61 0 -57 -24 c-121 -50 -246 -164 -303 -276
-42 -83 -59 -158 -58 -265 0 -88 5 -113 37 -210 47 -138 93 -222 161 -288 53
-52 146 -112 166 -105 5 2 -8 28 -29 58 -49 68 -74 117 -70 135 2 10 16 8 62
-11 32 -14 67 -24 79 -22 18 3 13 12 -42 78 -83 98 -94 116 -87 136 5 14 16
16 64 11 32 -4 64 -2 72 4 12 8 9 14 -20 37 -77 60 -119 105 -146 157 -16 29
-26 56 -23 60 3 3 30 -5 60 -19 82 -36 99 -40 99 -23 0 8 -25 57 -55 108 -30
51 -55 97 -55 101 0 15 32 8 75 -18 43 -25 65 -25 65 -1 1 52 111 202 170 231
36 19 88 27 95 16 3 -6 2 -10 -4 -10 -6 0 -39 -27 -74 -60 -183 -171 -179
-476 9 -679 77 -84 232 -159 179 -88 -70 96 -108 177 -121 257 -8 48 1 50 51
10 71 -57 70 -41 -11 129 -76 160 -72 178 22 90 46 -45 54 -49 54 -30 0 12
-13 51 -30 88 -16 36 -30 67 -30 70 0 2 11 -4 25 -13 31 -20 32 -9 9 59 -8 25
-14 56 -12 69 4 28 94 -184 180 -422 154 -426 238 -834 238 -1156 l0 -121 -67
-22 c-95 -31 -167 -84 -247 -182 -97 -119 -97 -119 -241 -119 -151 -1 -250
-18 -351 -62 -43 -19 -104 -41 -134 -47 -30 -7 -95 -26 -145 -41 -49 -16 -119
-34 -155 -40 -79 -13 -130 -29 -130 -40 0 -4 19 -11 43 -14 80 -12 602 -26
967 -26 622 0 1380 -39 1380 -71 0 -5 -73 -9 -162 -9 -241 0 -336 -17 -478
-85 -127 -61 -149 -67 -330 -90 -165 -21 -227 -38 -335 -90 -62 -30 -118 -48
-178 -59 -52 -9 -125 -31 -180 -56 -104 -45 -135 -51 -392 -79 -723 -79 -1917
-102 -2627 -50 -182 13 -181 13 -279 151 -98 138 -124 153 -314 183 -127 19
-218 41 -256 60 -15 8 -44 34 -65 57 -109 121 -182 184 -249 215 -39 18 -87
35 -107 38 l-36 6 -7 76 c-21 221 31 638 126 1003 73 279 260 812 267 760 2
-13 -4 -50 -14 -82 -9 -32 -14 -61 -11 -64 4 -4 18 1 32 10 30 20 31 16 6 -32
-25 -50 -54 -142 -47 -149 3 -3 29 20 59 51 59 62 91 74 77 29 -4 -16 -31 -80
-59 -143 -47 -107 -60 -150 -45 -150 4 0 24 16 45 35 54 48 63 46 55 -16 -10
-75 -46 -166 -94 -236 -23 -34 -38 -64 -34 -67 20 -12 118 48 176 107 111 113
161 239 159 402 -1 185 -68 305 -223 402 l-35 22 39 1 c22 0 59 -9 82 -21 63
-30 147 -126 175 -198 27 -69 35 -72 94 -36 82 51 83 25 5 -114 -28 -48 -50
-90 -50 -94 0 -15 44 -5 100 23 33 17 62 30 65 30 3 0 5 -11 5 -23 0 -40 -73
-140 -139 -192 -34 -27 -60 -53 -58 -59 3 -7 32 -10 80 -8 75 4 77 3 77 -20 0
-15 -29 -60 -75 -117 -41 -52 -75 -98 -75 -102 0 -17 35 -9 98 21 35 17 66 30
68 30 20 0 -17 -84 -74 -168 -19 -28 -33 -55 -30 -58 9 -9 78 30 135 75 92 74
173 220 219 396 21 83 24 267 5 335 -23 84 -75 173 -144 246 -81 87 -157 139
-257 177 l-75 28 100 -6 c112 -5 229 -34 292 -71 26 -15 59 -48 84 -85 44 -66
54 -66 85 -7 8 15 20 28 27 28 19 0 43 -48 58 -113 7 -32 15 -60 19 -62 4 -2
14 23 24 55 14 52 19 60 41 60 38 0 89 -62 125 -151 18 -44 36 -82 40 -84 17
-11 33 69 27 136 -8 91 -33 145 -106 223 -81 87 -81 99 -1 71 72 -26 79 -18
25 31 -27 25 -86 63 -130 84 -111 54 -218 74 -390 74 -159 1 -239 -14 -375
-69 -91 -37 -82 -21 20 34 101 54 184 75 297 76 57 0 103 3 103 6 0 3 -14 15
-30 27 -62 46 -30 52 120 23 52 -11 99 -16 103 -11 9 8 -19 32 -87 73 -26 15
-44 32 -41 37 10 16 133 11 235 -10 52 -11 103 -20 114 -20 16 0 17 2 5 17
-26 31 -130 92 -197 115 -54 18 -88 23 -172 22 -130 0 -203 -18 -330 -81 -77
-39 -112 -64 -188 -138 -51 -50 -90 -83 -86 -75 48 125 65 232 53 335 -13 106
-62 176 -149 213 -45 18 -188 12 -244 -12 -49 -20 -40 -31 39 -45 85 -16 92
-26 64 -90 -13 -31 -18 -56 -13 -61 5 -5 30 -5 58 1 27 5 51 7 53 5 3 -2 -7
-22 -21 -45 -27 -41 -34 -81 -16 -81 6 0 19 -15 30 -32 24 -39 26 -135 7 -238
l-13 -65 -13 65 c-18 94 -83 253 -140 346 -108 174 -197 240 -326 238 -121 -2
-242 -48 -363 -139 -61 -46 -162 -155 -162 -175 0 -5 35 15 79 44 73 50 161
90 223 103 43 9 36 -16 -28 -94 -42 -51 -52 -69 -40 -71 9 -2 83 19 164 47
140 49 212 62 212 41 0 -5 -11 -17 -25 -27 -77 -54 -77 -49 0 -72 118 -35 207
-104 266 -206 16 -27 29 -53 29 -57 0 -4 -30 22 -66 56 -121 115 -212 158
-339 157 -147 0 -261 -52 -320 -146 -58 -92 -142 -325 -117 -325 5 0 34 38 66
85 32 46 80 105 108 130 73 66 82 61 48 -27 -26 -70 -26 -82 1 -68 11 6 46 50
77 98 56 86 56 86 63 55 13 -66 17 -69 47 -40 34 33 108 66 146 67 l29 0 -23
-24 -23 -25 24 -5 c13 -3 48 -10 77 -15 50 -10 158 -58 150 -66 -2 -2 -24 3
-48 12 -111 39 -269 9 -379 -72 -93 -69 -192 -223 -225 -352 -27 -103 -16
-264 20 -293 10 -9 14 -4 19 27 19 119 55 208 84 208 8 0 22 -22 31 -50 9 -27
20 -49 25 -48 5 1 16 26 25 55 30 97 123 258 149 258 5 0 3 -24 -5 -52 -16
-60 -18 -134 -5 -142 5 -3 21 14 35 39 28 47 126 169 131 163 2 -2 -10 -41
-26 -88 -22 -66 -29 -103 -29 -168 0 -53 4 -81 10 -77 6 3 10 14 10 24 0 9 17
53 38 97 41 83 118 176 173 208 l32 19 -42 -74 c-242 -428 -428 -908 -515
-1334 -15 -71 -29 -140 -32 -152 l-4 -23 -65 25 c-74 27 -119 58 -220 145 -38
33 -95 73 -125 88 -51 25 -63 27 -175 26 -72 -1 -162 -10 -225 -22 -58 -11
-106 -19 -108 -17 -5 4 -34 164 -57 320 -53 362 -75 689 -70 1080 8 599 86
1107 242 1577 l45 138 30 -18 c120 -69 205 -276 197 -476 -2 -47 -1 -86 2 -86
10 0 47 90 63 152 7 29 17 91 21 138 l8 85 20 -44 c10 -25 28 -88 39 -140 10
-53 20 -100 22 -106 7 -21 58 107 63 160 3 30 9 55 14 55 12 0 37 -89 49 -177
10 -73 8 -144 -6 -210 -7 -36 15 -27 58 22 22 25 46 45 53 45 29 0 34 -113 9
-221 -9 -39 -13 -73 -10 -77 12 -12 78 65 105 123 44 93 56 157 55 290 -2 205
-55 346 -172 462 -77 76 -160 118 -268 135 l-79 12 58 9 c42 6 81 4 141 -7
111 -21 109 -22 91 15 -21 41 -14 46 29 20 45 -28 105 -95 118 -132 14 -41 33
-36 58 16 12 25 23 45 25 45 1 0 10 -44 20 -97 18 -102 46 -183 64 -183 7 0
11 30 11 78 0 42 4 83 9 90 20 32 90 -133 116 -274 9 -49 21 -93 25 -98 17
-18 31 80 31 216 0 77 -3 156 -7 176 -12 68 -53 139 -109 191 -179 163 -379
183 -650 66 l-60 -25 45 39 c108 96 231 137 383 127 53 -3 97 -4 97 -2 0 2
-16 28 -36 57 -35 52 -35 54 -14 57 29 5 104 -47 219 -153 97 -89 128 -111
139 -101 3 4 -6 44 -21 89 -26 79 -34 127 -22 127 38 0 181 -143 241 -239 46
-77 56 -62 23 37 -58 176 -162 316 -312 421 -163 112 -320 93 -532 -66 -98
-74 -246 -226 -304 -313 -23 -36 -40 -56 -38 -45 3 11 15 61 27 110 30 128 63
184 123 213 l49 23 -7 72 -7 71 26 -17 c14 -9 37 -24 51 -33 41 -27 54 -13 57
63 4 80 7 82 110 63 38 -7 71 -10 76 -6 12 13 -76 84 -147 119 -55 27 -77 32
-136 32 -49 0 -82 -6 -110 -20 -119 -59 -200 -222 -220 -445 -4 -47 -10 -78
-13 -70 -101 321 -353 566 -634 616 -101 18 -224 8 -313 -26 -42 -16 -21 -27
85 -44 52 -9 120 -23 150 -32 70 -21 152 -62 146 -73 -3 -5 -32 -12 -63 -16
-112 -13 -162 -34 -115 -49 9 -3 64 -15 121 -26 58 -12 116 -27 130 -34 23
-13 24 -14 5 -24 -10 -5 -34 -13 -52 -17 -17 -3 -32 -10 -32 -14 0 -4 26 -15
58 -25 104 -32 181 -83 282 -185 131 -133 167 -198 44 -81 -106 102 -222 176
-360 230 -203 79 -359 103 -511 76 -147 -25 -223 -66 -124 -66 50 0 101 -10
101 -21 0 -4 -47 -30 -104 -58 -139 -67 -191 -126 -231 -264 -28 -98 -15 -101
73 -15 83 82 147 121 190 116 27 -3 27 -3 25 -83 l-1 -80 26 35 c49 63 121
132 134 128 7 -3 17 -28 23 -56 5 -28 13 -53 16 -56 3 -4 33 11 66 33 88 57
120 65 237 58 103 -6 187 -26 288 -68 l56 -24 -103 3 c-74 3 -126 -1 -180 -13
-96 -21 -253 -99 -323 -160 -158 -140 -242 -360 -242 -632 0 -148 18 -232 70
-330 43 -83 104 -162 115 -151 4 4 0 37 -8 75 -22 94 -30 185 -18 202 7 11 23
0 73 -52 97 -102 108 -88 59 67 -16 50 -32 110 -36 133 -9 60 10 65 91 25 66
-33 94 -39 94 -22 0 5 -20 48 -44 95 -54 105 -80 228 -56 265 8 12 21 2 71
-52 91 -101 102 -94 83 52 -26 194 -16 219 52 125 21 -30 45 -55 53 -55 8 0
40 24 71 54 31 29 74 63 95 74 53 26 141 52 180 52 l32 0 -54 -147 c-199 -543
-326 -1145 -373 -1765 -13 -177 -13 -690 0 -867 11 -143 47 -456 56 -480 7
-22 -15 -31 -76 -31 -59 0 -80 10 -220 107 -101 70 -185 68 -331 -5 -118 -59
-188 -110 -281 -203 l-88 -86 0 -807 0 -806 5030 0 5030 0 0 883 0 883 -97 22
c-92 21 -106 28 -231 111 -146 97 -177 112 -302 136 -47 9 -120 30 -164 47
l-79 30 6 52 c3 28 13 105 21 171 36 282 48 746 26 1045 -46 632 -190 1266
-414 1824 -31 76 -56 141 -56 144 0 3 28 2 62 -2 80 -8 174 -52 236 -110 27
-25 53 -46 58 -46 5 1 25 24 44 52 59 88 64 81 56 -80 -4 -86 -3 -143 3 -146
5 -3 36 24 69 60 35 40 64 64 71 60 28 -17 4 -147 -46 -254 -48 -104 -44 -110
45 -67 40 20 77 33 82 30 17 -10 11 -53 -21 -173 -19 -71 -27 -118 -21 -124 6
-6 34 18 75 63 53 56 68 68 73 55 6 -16 2 -97 -12 -216 l-6 -55 20 20 c34 32
89 132 114 204 20 58 23 84 22 216 -1 127 -5 165 -27 247 -37 138 -86 227
-177 318 -86 87 -196 148 -315 176 -71 16 -221 22 -266 10 -13 -4 -7 3 16 15
109 60 302 99 390 79 26 -6 71 -26 101 -45 30 -19 58 -35 63 -35 10 0 21 35
21 72 0 15 5 30 10 33 14 9 57 -20 89 -59 14 -16 36 -42 49 -56 l23 -25 -7 65
c-5 52 -3 69 9 79 35 28 134 -25 226 -123 19 -20 39 -36 44 -36 17 0 -1 81
-32 145 -37 75 -93 128 -170 162 -31 13 -74 32 -96 43 l-40 18 28 11 c16 6 46
11 67 11 21 0 42 5 45 10 16 26 -177 64 -285 56 -89 -7 -226 -43 -328 -85
-130 -54 -230 -120 -329 -217 -80 -79 -90 -86 -71 -51 34 59 151 180 219 226
33 22 87 50 120 62 32 12 59 25 59 29 0 5 -17 12 -37 17 -78 18 -39 42 130 78
42 10 80 21 83 26 8 13 -33 26 -109 34 -37 4 -67 11 -67 16 0 26 122 74 258
103 57 11 103 26 103 31 1 32 -210 53 -311 30z"></path>
<path d="M7336 5901 c-29 -20 -72 -78 -64 -87 3 -2 25 7 49 21 77 43 140 29
199 -45 17 -22 35 -40 39 -40 4 0 15 18 24 39 18 40 45 63 84 73 33 9 108 -11
149 -38 44 -30 52 -27 23 10 -28 36 -117 86 -153 86 -16 0 -54 -12 -86 -26
l-58 -26 -48 26 c-59 31 -117 34 -158 7z"></path>
<path d="M5816 5741 c-28 -19 -73 -78 -64 -86 2 -2 27 8 56 22 71 35 108 27
178 -39 30 -28 55 -49 57 -47 1 2 11 21 21 42 39 76 131 88 226 29 28 -17 50
-27 50 -23 0 5 -23 30 -51 55 -79 71 -135 78 -227 30 -36 -19 -44 -18 -98 11
-56 30 -108 32 -148 6z"></path>
<path d="M6808 5354 c-27 -14 -82 -84 -73 -92 2 -2 29 8 59 23 77 38 115 30
179 -36 26 -27 49 -49 52 -49 2 0 13 17 24 38 25 49 60 72 108 72 46 -1 107
-22 134 -46 10 -9 22 -14 26 -10 12 12 -59 74 -109 96 -55 24 -85 21 -155 -13
l-42 -21 -53 27 c-59 30 -109 34 -150 11z"></path>
<path d="M12543 4303 c48 -2 126 -2 175 0 48 1 8 3 -88 3 -96 0 -136 -2 -87
-3z"></path>
<path d="M12893 4303 c15 -2 39 -2 55 0 15 2 2 4 -28 4 -30 0 -43 -2 -27 -4z"></path>
<path d="M6370 3905 c-52 -7 -135 -25 -184 -40 -88 -25 -236 -83 -236 -91 0
-2 276 -4 613 -4 l612 1 -38 20 c-54 28 -229 85 -322 104 -111 23 -327 28
-445 10z" id="sun"></path>
<path d="M5813 3697 c-126 -85 -205 -77 746 -77 945 0 874 -7 750 75 l-68 45
-683 -1 -683 0 -62 -42z" id="sun"></path>
<path d="M5575 3500 l-39 -40 1024 0 1024 0 -39 40 -39 40 -946 0 -946 0 -39
-40z" id="sun"></path>
<path d="M5441 3338 c-17 -23 -31 -46 -31 -50 0 -4 518 -8 1150 -8 633 0 1150
4 1150 8 0 4 -14 27 -31 50 l-31 42 -1088 0 -1088 0 -31 -42z" id="sun"></path>
<path d="M5332 3155 c-7 -14 -12 -30 -12 -35 0 -6 461 -10 1240 -10 779 0
1240 4 1240 10 0 5 -5 21 -12 35 l-11 25 -1217 0 -1217 0 -11 -25z" id="sun"></path>
<path d="M5260 2984 c-6 -14 -10 -27 -10 -30 0 -2 590 -4 1310 -4 721 0 1310
2 1310 4 0 3 -4 16 -10 30 l-10 26 -1290 0 -1290 0 -10 -26z" id="sun"></path>
<path d="M5430 2889 c-17 -5 -3 -8 45 -9 39 -1 95 -5 125 -10 32 -4 -111 -8
-345 -9 -239 -2 -389 -6 -372 -11 16 -5 209 -12 430 -17 281 -5 372 -10 302
-14 -55 -4 -334 -4 -620 -2 -286 2 -572 0 -635 -4 l-115 -9 180 -8 c100 -5
484 -5 865 0 377 5 1101 9 1610 8 509 -1 887 2 840 6 -47 5 -206 9 -355 9
-178 1 -265 5 -255 11 9 6 329 10 850 11 459 0 844 4 855 8 40 16 -167 21
-930 22 -429 1 -754 5 -723 8 120 13 63 21 -149 21 -280 0 -514 -11 -458 -21
22 -5 70 -8 108 -8 37 -1 67 -5 67 -9 0 -11 -238 -22 -430 -21 -149 1 -144 6
25 25 l70 7 -50 8 c-68 10 -904 17 -935 8z" id="sun"></path>
<path d="M6108 2783 c-60 -2 -108 -7 -108 -11 0 -4 17 -15 38 -24 37 -18 36
-18 -108 -13 -80 3 -197 10 -260 15 -120 12 -1213 4 -1340 -9 -126 -13 203
-21 783 -20 306 1 560 -1 564 -4 11 -12 -2 -17 -68 -24 l-64 -7 50 -7 c50 -7
1795 8 1803 15 2 2 -49 7 -113 11 -64 4 -113 10 -110 13 3 4 272 10 598 14
326 4 610 12 632 16 l40 9 -47 7 c-47 8 -1513 0 -1718 -9 -120 -5 -122 0 -5
12 l80 8 -120 6 c-124 6 -340 7 -527 2z" id="sun"></path>
<path d="M5250 2643 c-154 -4 -168 -6 -150 -28 7 -8 11 -15 9 -16 -2 0 -167
-4 -366 -8 -234 -4 -366 -10 -373 -17 -13 -13 277 -24 644 -25 251 0 334 -11
176 -23 -144 -11 -262 -26 -279 -36 -10 -6 489 -9 1339 -7 1334 2 1437 4 1374
32 -11 5 -380 11 -821 15 -561 4 -806 9 -814 17 -13 13 202 20 866 28 615 8
1078 31 1139 55 12 5 -510 9 -1160 9 -649 1 -1241 3 -1315 5 -74 1 -195 1
-269 -1z" id="sun"></path>
<path d="M5150 2410 c-234 -4 -441 -11 -460 -15 -35 -8 -35 -8 -10 -18 16 -7
232 -12 595 -15 346 -3 556 -8 535 -14 -40 -9 -543 -27 -794 -28 -108 0 -167
-3 -160 -10 5 -5 246 -10 609 -12 471 -3 607 -6 633 -17 17 -7 32 -17 32 -22
0 -12 -353 -11 -684 2 -283 11 -326 9 -306 -16 18 -22 4 -33 -48 -41 -26 -4
-56 -10 -67 -14 -25 -9 7 -14 230 -35 270 -26 304 -37 203 -70 -29 -10 -57
-21 -61 -25 -12 -11 111 -20 272 -20 79 0 142 -3 139 -6 -3 -3 -85 -14 -183
-25 -194 -21 -237 -29 -242 -46 -6 -17 85 -41 202 -52 158 -16 484 -24 581
-15 l89 8 -65 7 c-36 4 -105 7 -155 8 -49 1 -128 4 -174 8 -206 16 13 24 853
33 858 9 1258 21 1396 40 36 5 69 10 74 10 6 0 6 4 0 10 -13 13 -182 26 -569
45 -428 21 -726 40 -1245 80 -245 19 -452 35 -459 35 -12 0 -12 3 -3 12 10 10
132 11 535 8 933 -9 2380 -5 2412 7 48 16 -155 21 -1265 33 -1106 11 -1347 17
-1331 33 7 7 342 13 988 19 1324 10 1747 24 1598 52 -20 4 -508 4 -1083 0
-1008 -7 -1219 -4 -1162 18 20 7 356 21 740 29 l75 2 -50 8 c-69 12 -1696 19
-2215 9z" id="sun"></path>
</g>
</svg>
  </div>
</div>

• card：定义了一个类名为card的div容器，用于包含卡片的内容。
• card__content：定义了另一个类名为card__content的div容器，用于包含文本和SVG图形。
• card-details：定义了一个类名为card-details的div容器，用于垂直居中显示文本内容。
• text-title：一个段落元素，包含标题文本。
• text-body：另一个段落元素，包含副文本。
• sunsetsvg：定义了一个SVG图形，类名为sunsetsvg，用于显示日落图像。

CSS

.card {
  width: 250px;
  height: 320px;
  padding: 5px;
  background-image: linear-gradient(#ca1eb3, #FD2E24, #FFD701 70%);
}

.card__content {
  background-color: #212121cf;
  backdrop-filter: blur(50px);
  width: 100%;
  height: 100%;
  padding: 15px;
}

.card-details {
  height: 100%;
  gap: .5em;
  display: grid;
  place-content: center;
}

.text-body {
  margin-top: -35px;
  color: #ff8d79;
  text-align: center;
}

.text-title {
  margin-top: -125px;
  color: #ff4d7d;
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
}

.sunsetsvg {
  width: 313px;
  margin-left: -51.9px;
  margin-top: -165px;
  fill: black;
}

#sun {
  fill: url(#MyGradient);
}

• .card：为卡片设置宽度、高度、内边距，并应用一个线性渐变背景。
• .card__content：为卡片内容设置背景颜色、模糊效果、宽度和高度，并添加内边距。
• .card-details：设置卡片详情的高度、间距、显示方式，以垂直和水平居中其内容。
• .text-body和.text-title：为文本设置颜色、字体大小、粗细和对齐方式，并调整它们的位置。
• .sunsetsvg：为SVG图形设置宽度、左边距、上边距，并设置填充颜色为黑色。
• #sun：为SVG中的#sun元素设置渐变填充，这个渐变定义在SVG的 部分。

原文地址：https://blog.csdn.net/weixin_52814911/article/details/143691036

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！