怎么利用CSS变量修改样式
这篇文章将为大家详细讲解有关怎么利用CSS变量修改样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联专注于企业营销型网站、网站重做改版、四川网站定制设计、自适应品牌网站建设、H5场景定制、商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为四川等各大城市提供网站开发制作服务。
改变div的hover背景色
那么,来认识下css variable吧
1. 基本用法
局部变量
div { --masterColor: red; background: var(--masterColor); }
全局变量
/* 对于HTML来说,:root 表示 元素 */ :root { --masterColor: red; } div { background: var(--masterColor); }
2. 语法
var(
示例:
div { /* --masterColor未定义,所以背景色使用red 它可以通过逗号分隔,定义多个声明值,var(--masterColor, red, green) */ background: var(--masterColor, red); }
变量可以通过var()进行引用
示例:
div { --masterColor: red; --bgColor: var(--masterColor) }
注意:属性名是不能使用变量的
错误示例:
div { --bg: background; var(--bg): red; }
3. 浏览器支持
Can I use
使用@support检测
@supports ( (--masterColor: red)) { /* supported */ } @supports ( not (--masterColor: red)) { /* not supported */ }
使用JS检测
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--masterColor', 'red'); if (isSupported) { /* supported */ } else { /* not supported */ }
关于怎么利用CSS变量修改样式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享名称:怎么利用CSS变量修改样式
网站URL:http://scyanting.com/article/pegceo.html