重新审视 CSS 边框图像 | CSS-Tricks

Author's Work History: Wrote first book Transcending CSS almost 20 years ago. Ten years later, wrote Hardboiled Web Design Fifth Anniversary Edition covering similar ground and introducing border-image property. Published updated version Transcending CSS Revisited freely online and Hardboiled Web Design available from his bookshop.
Excitement about border-image: Was excited about new border-image property as it allowed adding images to element borders. Regularly used it since but it remains underused and author can't figure out why. Maybe due to awkward syntax and lack of solving creative implementation problems.
Using border-image on Mike Worth's Website: Mike Worth is a game composer who hired author to create highly graphical design. Used border-image throughout website.
- Decorative Buttons: Created SVG of tablet shape and added it to buttons using border-image with stretch repeat and fill center slice.
- Article Scroll: Struggled with implementing paper scroll effect. Tried using multiple SVG files and pseudo-elements which felt clumsy. Using border-image with one SVG was more elegant and reduced code.
- Home Page Overlay: Added action-packed graphic with hover effect using border-image. Reduced opacity and added colored gradient overlay on hover.
Conclusion: border-image is a powerful CSS tool with great flexibility. Proved valuable in Mike Worth's website, improving performance while maintaining graphics. Encourages others to experiment with it and add it to their design toolkit.
About Andy Clarke: Andy Clarke is a web design pioneer, instrumental in pushing boundaries. Wrote several industry-leading books like Transcending CSS, Hardboiled Web Design, and Art Direction for the Web. Works with businesses and has a popular web design contract template. His studio is Stuff & Nonsense.