lzg

2308 积分	0 好友	259 主题

发消息

一行CSS代码效果

楼主

发表于 2021-1-19 12:16:55 | 查看: 802| 回复: 0

要说到 CSS 最有意思的属性，我觉得背景（background）肯定能够获得很多选票。背景分为：

纯色
线性渐变(linear-gradient)
径向渐变(radial-gradient)
角向渐变(conic-gradient)
多重线性渐变(repeating-linear-gradient)
多重径向渐变(repeating-radial-gradient)
多重角向渐变(repeating-conic-gradient)

突出一个字，离谱。并且它们还可以互相混合、叠加添加滤镜、配合各种背景相关属性等等等。
不过今天，来看看一行 CSS Background 代码能玩出什么花来。嗯？这里的主角是多重角向渐变(repeating-conic-gradient)，只用一行 CSS 代码：
{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);}复制代码这什么玩意？脑补一下，这行代码绘制出来的图形会是什么样子？看看：

Wow，不可思议。这里 0.1deg 非常关键，这里的角度越小（小于 1deg 为佳），图形越酷炫。
我们把 0.1deg 替换成 30deg 看看：
{ background: repeating-conic-gradient(#fff, #000, #fff 30deg);}复制代码

当然也非常好看，只不过没有上面那个那么惊艳。
CodePen -- One Line CSS Pattern
我们可以再利用 CSS - Doodle，随机产生这份美：

CSS - Doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同 CSS 效果。

没错，它的本质其实就是上述的那一行核心 CSS 代码。
CSS Doodle - CSS Magic Conic-gradient
margin: auto 与 place-items: center这个也非常有意思，当然，它不算严格意义上的一行 CSS，因为需要搭配其他属性一起使用。
最快水平垂直居中一个元素的方法是什么？
水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这两种方法应该算是最便捷的了：
方法一：flex 布局下的 margin: auto<div class="g-container"> <div class="g-box"></div></div>复制代码.g-container { display: flex;}.g-box { margin: auto;}复制代码

上面的 display: flex 替换成 display: inline-flex | grid | inline-grid 也是可以的。

在 display: flex 布局下， margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
CodePen Demo -- 使用 margin auto 水平垂直居中元素
如果你对非常有用的 margin: auto 还不是很了解，可以看看：探秘 flex 上下文中神奇的自动 margin
方法二：grid 布局下的 place-items: center直接上代码：
.g-container { display: grid; place-items: center}复制代码上述两个份代码效果都是一样的：

CodePen Demo -- 水平垂直居中元素 grid+ place-items: center

作者：chokcoco
链接：https://juejin.cn/post/6914471841327218702
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

回复 支持0 反对0

收藏0 回复只看该作者道具举报

返回列表

		自动登录	找回密码
密码			立即注册