怎么做免费的宣传网站/如何用html制作一个网页
CSS3 高级技巧
- 一、css 还能定义变量?
- 二、css 实现渐变色
- 三、css 旋转元素
- 四、css 伪元素
- 五、未完待续
Author：Gorit
Date：2021/7/28
2021年发表博文： 19/50 19/30
一、css 还能定义变量?
css 还可以定义 ““变量”？对，你没有听错！！！除了 scss 还有 less 这样的 css 预处理语言可以地宁弈半两以外，css 也可以变量了
如果你想要了解详情: MDN 中对 CSS 定义变量的解释
使用起来非常简单
:root {/* 定义变量，必须使用 -- 来表示前缀*/--demo: #333333;
}/* 使用定义的变量，使用 var() 就可以应用变量了 */
.my-demo {color: var(--demo);}
总结：
- css 定义变量需要使用 – 来修饰
- 引用变量需要用到 var(你上面定义的变量)
- :root 表示，这是一个 css 伪类，简单来说，你在这里定义的变量，可以在 HTML 文档中任何处使用
买个属于自己的服务器，可以搭建个人网站，各种应用练习。
【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元
二、css 实现渐变色
使用 background 的 linner-gradient 属性即可实现渐变色的效果
background: linear-gradient(to right, var(--pink), yellow 40%, #ca2727 60%, #1e84be 80%);
渐变色实现的效果类似这样
三、css 旋转元素
使用 trasfmor 元素变化的 rotate() 属性即可，实现旋转元素的效果。旋转方式为 逆时针， deg 参数为英文中 degree，旋转多少度
transform: rotate(18deg);
四、css 伪元素
如果我们不想 HTML 代码太过于冗余，我们可以使用 css 微元素来替代 HTML 块,如下
.header {xxxx
}.header:before {content: '';position: absolute;xxxx
}.header:after {content: '';position: absolute;xxxxx
}
使用 befire 和 after。可以实现和 HTML 代码块相同的样式效果
五、未完待续
我会继续更新，日常开发中遇到的 css 好用的技巧