好奇心驱使下试验了chatGPT写CSS代码的能力-工具盒子

chatGpt封面图

想了10个与CSS相关的书写案例，看看chatGPT的CSS代码水平如何，评估下自己会不会失业。

一、开始啦，走起

1. 圆角渐变按钮

You
23:14
写一段CSS代码，蓝色渐变背景，圆角大小8px，高度40px，宽度120px
ChatGPT
23:14
"`css
div {
background: linear-gradient(to bottom, #007bff, #0088cc);
border-radius: 8px;
height: 40px;
width: 120px;
}
"`

解释：
-- `background` 属性定义背景颜色、图像或渐变。这里使用了 `linear-gradient()` 渐变函数，表示从顶部到底部使用蓝色线性渐变，颜色分别为 `#007bff` 和 `#0088cc`。
-- `border-radius` 属性可定义边框的圆角。这里设置为 `8px`，即8像素。
-- `height` 属性定义元素的高度，这里设置为 `40px`。
-- `width` 属性定义元素的宽度，这里设置为 `120px`。

喔噢，天哪，有点屌啊，这水平，已经比大部分前端都厉害了，你让现在的前端手写一个CSS渐变代码，很多人都写不出来的，线性渐变根本就拼不出来。

这ChatGPT不仅写了出来，连排版都弄好了，还是markdown语法，连各个属性的含义和作用都显示了，牛！

2. flex两端对齐布局

You
23:44
写一段CSS，flex布局，水平方向两端对齐，垂直方向居中对齐
ChatGPT
23:44
.container {
display: flex;
justify-content: space-between; /*水平方向两端对齐*/
align-items: center; /*垂直方向居中对齐*/
}

我了个擦，全对，连选择器类名都用得非常的合适，???

3. 全屏覆盖的黑色半透明层

You
23:51
写一段CSS，全屏覆盖的黑色半透明浮层，黑色透明度是75%
ChatGPT
23:51
"`css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
"`

解释：

-- `position: fixed;` 让元素固定在浏览器窗口的位置，不随页面滚动而变化。
-- `top: 0; left: 0;` 让元素从左上角开始覆盖整个屏幕。
-- `width: 100%; height: 100%;` 让元素的宽度和高度都等于屏幕的宽度和高度，实现全屏覆盖效果。
-- `background-color: rgba(0, 0, 0, 0.75);` 设置背景颜色为黑色，透明度为 75%，使用 rgba 颜色格式。

天呐个撸，我以为这一题应该会出点岔子的，没想到啊没想到，完全正确，这CSS代码水平，已经是职业水准了。???

4. 灰色分隔线

You
23:56
写一段CSS，灰色分隔线，高度1像素
ChatGPT
23:56
可以使用伪元素来实现灰色分隔线，代码如下：

"`CSS
.separator {
position: relative; /* 设置相对定位 */
height: 1px; /* 设置高度 */
}
.separator::before {
content: ""; /* 添加伪元素 */
position: absolute; /* 设置绝对定位 */
top: 50%; /* 设置位置居中 */
left: 0; /* 从左侧开始 */
width: 100%; /* 宽度为整个父元素 */
height: 1px; /* 高度同父元素 */
background-color: #ccc; /* 灰色背景色 */
transform: translateY(-50%); /* 使用transform垂直居中 */
}
"`

在HTML中，可以将类名`separator`添加到需要添加分隔线的元素上，例如：

"`HTML
Some content

这样就会在`div`的顶部添加一条1像素高的灰色分隔线。

终于遇到了一个不完美的回答了。

这个回答不能说不正确，最终的效果也确实是一个 1px 高度的灰色分隔线，但是实现逻辑就啰嗦了，直接给.separator设置background-color为灰色就可以。

至于为什么会使用伪元素，那是因为在移动端，为了实现.5px的分隔线，都使用伪元素去创建（border边框半像素渲染效果不太好，在过去），chatGPT估计有大量类似代码的学习。

5. 图片元素的样式设置

You
00:04
写一段给图片元素添加样式的CSS，图片宽高都是10rem大小，图像内容填充方式是cover
ChatGPT
00:04
img {
width: 10rem;
height: 10rem;
object-fit: cover;
}

对于上面的结果，我只能说一句：牛逼！

6. CSS变量的使用

You
00:08
定义一个CSS变量，变量名任意，变量值是深天空蓝，此变量作为链接颜色使用，请用CSS代码表示
ChatGPT
00:08
--link-color: #0077B5;

a {
color: var(--link-color);
}
/* 将 a 标签的文本颜色设置为定义的变量，以便链接颜色与变量颜色相同 */

当答案出现的那一刻，我扑通一声给跪下了，这都可以，神了呀，无可挑剔。

我写的这段prompt怕是很多前端同行都会理解有误，这个chatGPT居然能够准确理解，且给出完全符合预期的代码，不得不服啊！

7. 去年支持的@container容器查询

You
00:12
写一段任意的容器查询CSS语句
ChatGPT
00:12
.container {
width: 100%; /*设置容器宽度为100%*/
max-width: 1200px; /*设置容器最大宽度为1200像素*/
margin: 0 auto; /*居中显示容器*/
padding: 20px; /*设置容器内边距为20像素*/
box-sizing: border-box; /*让容器的内边距和边框不会撑开容器*/
background-color: #fff; /*给容器设置白色背景颜色*/
border: 1px solid #ccc; /*给容器设置1像素灰色边框*/
}
You
00:15
写一段任意的@container规则查询CSS语句
ChatGPT
00:15
@media (min-width: 768px) {
.container {
max-width: 750px;
}
}

这个@container规则设置容器的最大宽度为750像素，只有在视口宽度大于等于768像素时才生效。

这个就没回答正确，哈哈哈，终于，估计是训练的模型数据不包括@container容器查询，毕竟这个CSS新特性是2022年才由各大浏览器支持的。

所以，ChatGPT学习CSS新技术新特性的能力要比成熟技术弱一些。

8. CSS兼容性询问

上上篇文章介绍了Safari 16开始支持的text-align-last属性，我就问问这个，嘿嘿嘿，我觉得我好坏，这种新特性正中ChatGPT的软肋，估计是不知道的。

结果------

You
00:26
text-align-last属性Safari浏览器支持吗？
ChatGPT
00:26
是的，Safari浏览器支持text-align-last属性。
You
00:27
text-align-last属性是Safari浏览器哪个版本支持的？
ChatGPT
00:27
Safari浏览器从版本9开始支持text-align-last属性。

一开始的回答出乎我的意料，我还以为chatGPT紧跟时事，连Safari去年底支持了text-align-last属性都知道，结果我追问了下，哦吼，原形毕露了，完全错误，Safari 9根本就不支持text-align-last属性，倒是justify-content和justify-items属性是Safari 9开始支持的。

这种过于细节的知识，Safari似乎表现没那么强了，还是比不过我，哈哈哈哈哈哈哈哈哈哈哈哈???

9. :is()和:where()伪类的区别

You
00:29
CSS :is()伪类和:where()伪类的区别
ChatGPT
00:29
:is()伪类和:where()伪类都是CSS Level 4新增的伪类，它们可以将多个选择器组合为一个复合选择器，从而使得写CSS代码更加简洁、灵活。

区别：

:is()伪类可以接受多个参数，将其作为"或"的关系组合在一起，例如`:is(p, h1, .class)`。而:where()只能接受一个参数，与该参数组合是等效的。
:is()伪类可以嵌套使用，例如`:is(:first-child, :last-child)`, 但:where()伪类不能嵌套。
:is()不会影响其他伪类的解析，而:where()会对其他伪类和伪元素的解析产生影响。

总之，:is()相对于:where()来说更加灵活、功能更强大，但还未普及以前，我们需要继续使用:where()伪类。

嗯......???

这个问题就属于一本正经地胡说八道了，:is()和:where()伪类的区别仅在于两者的选择器优先级不同而已，语法什么都是一样的。

chatGPT应该买本《CSS选择器世界》看看，或者等下个月《CSS选择器世界第2版》也可以，那就不会犯这么明显的错误了。

这样看起来很正经的解释最容易误人子弟了。