【uniapp】css3 的 calc() 函数使用表达式动态计算 -凯发k8官方网

• css3 中增加了 calc() 函数
• calc() 函数语法：property: calc(expression)
• expression 表达式为： “ ”、 “-”、"*"、"/" 表达式
• “ ”、 “-“符号前后必须为空格，比如：calc(50% - 8px)。”*”、"/"符合无此要求。
• expression 表达式中允许嵌套函数（var 函数可以获取css变量），例如：.foo {--widtha: 100px;--widthb: calc(var(--widtha) / 2);--widthc: calc(var(--widthb) / 2);width: var(--widthc); }

https://developer.mozilla.org/en-us/docs/web/css/calc

需求：

思路：

• 播放按钮采用 absolute 定位（前提：父级元素为 relative 定位）
• 播放按钮宽高为 50px
• 播放按钮在 x 轴剧中，则 left 的值应为 ： 50% - 25px
• 播放按钮在 y 轴剧中，则 top 的值应为 ： 50% - 25px

相关代码

vue代码：