:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示元素,除了优先级更高之外,与 html 选择器相同。
在声明全局 CSS 变量时 :root 会很有用:
:root { --main-color: hotpink; --pane-padding: 5px 42px;}
place-items
CSS 中的 place-items 是一个简写属性 ,它允许我们在相关的布局(如 Grid 或 Flexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-items 和 justify-items 属性)。
如果未提供第二个值,则第一个值作为第二个值的默认值。
也就是说,以后需要定义水平垂直居中的盒子就不需要再 justify-items: center 和 align-items: center 了,直接一行搞定,看起来更加专业。
background-clip
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
值
linear-gradient()
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
其结果属于 < gradient > 数据类型,是一种特别的 < image > 数据类型。
radial-gradient()
radial-gradient() CSS 函数创建了一个图像,该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形(circle)或椭圆形(ellipse)。
这个方法得到的是一个 CSS < gradient > 数据类型的对象,是 < image > 的一种。
实现效果大致如下:
css 样式如下:
* { box-sizing: border-box; } /* :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同。*/ /* 在声明全局 CSS 变量 */ :root { --color-1: #186cb8; --color-2: #2a9a9f; --color-3: #f1b211; --color-4: #e83611; --color-5: #f9002f; } .wrapper { background: #000; line-height: 1; min-height: 100%; display: grid; place-items: center; min-height: calc(100vh - 16px); } h1 { font-family: "Exo", sans-serif; font-size: 15vw; font-weight: 900; width: -webkit-min-content; width: -moz-min-content; width: min-content; margin: auto; text-transform: uppercase; background: linear-gradient( 219deg, var(--color-1) 19%, transparent 19%, transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%, transparent 40%, var(--color-3) 40%, var(--color-3) 59%, transparent 59%, transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80% ); background-clip: text; -webkit-background-clip: text; color: transparent; } .container { padding: 1.5rem; text-align: center; background: radial-gradient( circle at 1.4% 1.4%, var(--color-1) 0.8%, transparent 0.8% ), radial-gradient( circle at 5.5% 3%, var(--color-2) 0.45%, transparent 0.45% ), radial-gradient( circle at 2.5% 3.5%, var(--color-3) 0.5%, transparent 0.5% ), radial-gradient( circle at 4.5% 1.2%, var(--color-4) 0.25%, transparent 0.25% ), radial-gradient( circle at 98% 98%, var(--color-1) 0.8%, transparent 0.8% ), radial-gradient( circle at 95% 95%, var(--color-2) 0.45%, transparent 0.45% ), radial-gradient( circle at 94.5% 97.5%, var(--color-3) 0.5%, transparent 0.5% ), radial-gradient( circle at 98.5% 95.5%, var(--color-4) 0.25%, transparent 0.25% ); } @media screen and (min-width: 768px) { h1 { font-size: 6.5rem; } }
html 标签结构如下:
multi color text with css
绘画基础图案不难,重点都在于背景颜色的绘制,重点研究下背景代码。
下期给大家分享更多实战中的点滴,如果大家对此感兴趣,欢迎各位关注、留言,大家的支持就是我的动力!
留言与评论(共有 0 条评论) “” |