{site_name}

{site_name}

🌜 搜索

CSS函数是一种用于计算和生成样式值的内置函数,可以使用它们来动态地调整元素的外观和布局

前端 𝄐 0
css函数式编程,css定义函数,css3函数,css(),css @用法,css%
CSS函数是一种用于计算和生成样式值的内置函数,可以使用它们来动态地调整元素的外观和布局。这些函数以特定的语法格式书写,并以逗号分隔参数,通常放在属性值中的函数表达式内部。

以下是一些常见的CSS函数及其示例:

1. calc() - 用于执行算术运算并计算属性值
css
width: calc(100% - 20px);
height: calc(50vh + 10%);

2. var() - 用于声明自定义属性并引用其值
css
--primary-color: #007bff;
color: var(--primary-color);

3. rgb() / rgba() - 用于设置颜色
css
color: rgb(255, 0, 0); /* 红色 */
background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */

4. translate() - 用于移动元素位置
css
transform: translate(20px, 50px);

5. scale() - 用于缩放元素大小
css
transform: scale(1.5);

6. rotate() - 用于旋转元素
css
transform: rotate(45deg);

7. url() - 用于引用外部资源,如图像或字体文件
css
background-image: url("example.png");
font-family: url("example.woff2");


这些是只有一小部分的CSS函数,还有许多其他函数可用于实现更高级的样式效果。