以前，自定义 github 个人资料的唯一方法是更新图片或更改名称。这意味着每个 github 配置文件看起来都一样，自定义它或脱颖而出的选项很少。
从那时起，您可以选择使用 markdown 创建自定义部分。您可以包括您的简历、您的兴趣和爱好，让您的个人资料反映您的身份。这是任何人在访问您的个人资料时看到的主要部分之一。
在这篇文章中，我将向您展示我如何创建我的 github 自述文件。我将使用 markdown 并解决它的主要问题。问题是它可能受到高度限制，因为您无法更改颜色，调整位置和间距可能很困难。要解决这个问题，有一种方法可以将 css 添加到 github 自述文件中，甚至添加过渡以呈现更好的 ux。
但是让我们先从创建自述文件开始。为此，您需要创建一个新的公共存储库，该存储库正是您的 github 用户名。您将看到一个小文本，表明这将是一个独特的存储库。
立即学习“前端免费学习笔记（深入）”；
现在，无论您在 [readme.md]() 文件中更新什么，它都会显示在您的个人资料中。您可以使用 markdown 语法或 html 来显示您的内容。如果您添加任何内联样式、css 文件或 javascript，它将被 github 删除，因此该解决方案是行不通的。
解决方案
在 readme.md 文件中，您可以包含图像。其中包括 svg 文件。使我们能够添加 css 的漏洞是使用 svg 文件中的foreignobject 元素嵌入自定义 html 和 css。 foreignobject 元素允许您在 svg 图形中包含来自其他标记语言的元素。
让我们在存储库中创建一个新文件，名为 header.svg。就我而言，我希望在我的个人资料上显示一条文本，内容为 codeflow.，具有漂亮的渐变和打字机效果。为了实现这一点，我在 svg 文件中的foreignobject 中编写了一些 css 和一些 html ：
.wrapper { height: 100vh; display: grid; place-items: center; } .text { width: 9ch; animation: typing 1.5s steps(9), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 4em; background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes typing { from { width: 0 } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: rgba(254,0,255,1); } }codeflow.
现在让我们更新 readme.md 文件以使用此 svg 作为图像并将其显示在我们的个人资料中：
就是这样。它实际上只是封装在 svg 中的一些 css 和 html。查看下面的最终结果，或者如果您想查看实际效果，我的 github 个人资料在这里。
以上就是使用 CSS 让您的 Github 个人资料脱颖而出的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629878.html
微信扫一扫 
支付宝扫一扫 
