Atmosphere & Background · The air of the page
Running border描边流光
- premium
- directional
- relentless
A short segment of light runs around the card's edge with a blurred tail behind it. The fill and the text never move — only that border does, so it can keep saying “this card is live” without ever interrupting what you are reading.
When to use it
Use it on the one card that is both clickable and worth clicking: a membership card, a live promotion, the primary action on a first screen. One per screen at most — with two on screen the eye picks one and the other was wasted. Skip it on plain display cards and list rows; there is nothing there to emphasise.
Parameters
stroke-dasharray 16% of perimeter · 0.13px/ms travel · linear, constant speed · glow blur 5px · head 1.6px + drop-shadow
Recipe
Running border → stroke-dasharray 16% of perimeter · 0.13px/ms travel · linear, constant speed · glow blur 5px · head 1.6px + drop-shadow
One sentence for your AI
Put a running highlight on this card's border: use an SVG stroke-dasharray to cut one segment equal to 16% of the perimeter, then decrease stroke-dashoffset at a constant rate so the segment travels around the card. Stack three passes: the original static 1px border underneath, a 3px accent-coloured pass with 5px blur in the middle, and a 1.6px white line with a slight outer glow on top as the head. Let the dash follow the path around the corners rather than building the border from four straight edges.