其他
【每日一练】63—CSS实现金属边框文本效果
写在前面
今天我们练习一个CSS就可以实现的金边框文字效果，很早之前如果我们想要实现这样的效果，基本都是需要借助PS来处理成图片来实现金属边框的效果。
而CSS发展到今天，真的是越来越好用了，现在，我们还是一起来看一下它的最终效果。
截图如下：
<html><head> <meta charset="UTF-8"> <title>【每日一练】63-CSS实现金属边框文本效果</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head><body> <div class="box"> <div class="bg"> web前端开发 </div> <div class="fg">web前端开发</div> <p>博客网站：<a href="http://www.webqdkf.com">www.webqdkf.com</a></p> </div></body></html>
* { box-sizing: border-box; } :root { --gold: #ffb338; --light-shadow: #77571d; --dark-shadow: #3e2904; } body { margin: 0; } .box { background: radial-gradient(#272727, #1b1b1b); display: grid; grid-template-areas: 'overlap'; place-content: center; text-transform: lowercase; height: 100vh; } .box > div { -webkit-background-clip: text; color: #363833; font-family: "Microsoft Yahei","sans-serif"; font-weight: 900; font-size: clamp( 3em, 18vw, 15rem); grid-area: overlap; letter-spacing: 1px; -webkit-text-stroke: 4px transparent; } div.bg { background-image: repeating-linear-gradient( 105deg, var(--gold) 0% , var(--dark-shadow) 5%, var(--gold) 12%); color: transparent; filter: drop-shadow(5px 15px 15px black); transform: scaleY(1.05); transform-origin: top; } div.fg{ background-image: repeating-linear-gradient( 5deg, var(--gold) 0% , var(--light-shadow) 23%, var(--gold) 31%); color: #1e2127; transform: scale(1); } .box p{ color:#888; font-size:2em; font-family: "Microsoft Yahei","sans-serif"; } .box p a{ color:#888; text-decoration: none;} .box p a:hover{ color:#fff; text-decoration: none;}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号