ps制作的文字特效非常漂亮,比如给文字加粗描边,今天我们就来探讨一下css实现这样的效果。
<html> <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111"> <title>css实现ps给文字描边效果www.woaidaogu.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> body, html { width: 100%; height: 100%; display: flex; } p { margin: auto; position: relative; font-size: 64px; letter-spacing: 6px; font-weight: bold; -webkit-text-stroke: 2px #000; filter: url(#dilate); } </style> <script> window.console = window.console || function (t) { }; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <p>我爱捣鼓文字加粗描边</p> <svg width="0" height="0"> <filter id="dilate"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology> <feFlood flood-color="red" flood-opacity="2" result="flood"></feFlood> <feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite> <feMerge> <feMergeNode in="OUTLINE"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </svg> <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;"> <div></div> <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a> <a id="xl_chrome_ext_close" href="javascript:;"></a> </div> </body> </html>
通过以上内容我们知道了css如何实现ps给文字描边效果?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!