css-常用函数详解

在 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%); 表示蓝色。

  1. 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 */
  1. 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%);
  1. translate3d(),translateX(),translateY(),translateZ() 同表示在不同方向上的位移。
相关推荐
PleaSure乐事1 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v5 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫6 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.12 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds2 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js