阅读量:0
在 CSS 中，有一些内置的函数可以帮助我们实现更复杂和灵活的样式效果。以下是一些常见的 CSS 函数
1. calc() 函数允许进行数学计算来确定属性值。例如，width: calc(100% - 50px); 可以根据屏幕宽度动态调整元素宽度。
案例：响应式布局
.container { width: calc(100% - 20px); padding: 0 10px; } @media (min-width: 768px) { .container { width: calc(750px - 20px); } } 2. rgba() 函数用于创建具有透明度的颜色值。像 color: rgba(255, 0, 0, 0.3); 这样的设置能使颜色呈现半透明效果。
案例：透明度调整
.overlay { background-color: rgba(255, 0, 0, 0.3); }3. url() 函数用于引入外部资源，常见的是图片。比如 background-image: url('image.png'); 来设置背景图片。
4. var() 函数能够引用自定义的 CSS 变量。假如定义了 --primary-color: #007bff ，则可以通过 color: var(--primary-color); 来使用该变量定义的颜色。
案例：引用变量
:root { --primary-color: #007bff; --font-size: 16px; } .button { background-color: var(--primary-color); font-size: var(--font-size); }5. hsl() 函数以色相、饱和度和亮度来精确指定颜色。例如 background-color: hsl(240, 100%, 50%); 表示蓝色。
6. linear-gradient() 或 radial-gradient() 函数创建独特的背景效果
案例：渐变色背景
body { background: linear-gradient(to bottom, red, blue); //函数用于创建线性渐变背景。如 从顶部的红色渐变到底部的蓝色。 } /* 或者 */ div { background: radial-gradient(circle, red, yellow); // 函数用于创建径向渐变背景。比如 以圆形方式从红色渐变到黄色。 } 7. blur() 方法将高斯模糊应用于输出图片。 例如：filter: blur(0); 模糊的半径，值为<length>。它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。值为 0 会使输入保持不变。该值为空则为 0。
案例：处理图片模糊
blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */ 8. translate() 方法函数在水平和/或垂直方向上重新定位元素。单个值边上在水平方向上的唯一，两个值表示第一个值在水平方向上的位移、第二个值表示在竖直方向上的位移。
案例：元素在屏幕中的位移
/* Single <length-percentage> values */ transform: translate(200px); transform: translate(50%); /* Double <length-percentage> values */ transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); 9. translate3d()，translateX()，translateY()，translateZ() 同表示在不同方向上的位移。
