-
圆锥渐变,类似以下的
-
浏览器支持情况
还处在一个实验中的功能,如果想要使用,需要开启在Chrome�实验功能选项:
虽然圆锥渐变还处在实验中的功能,但不妨碍我们学习怎么去运用它,从而触及旁通。
如图所示,要实现的是一个圆环,怎么在中间设置一个遮罩层呢?
-
方法一,在 conic-gradient() 上再设置一层 background-image 进行遮罩,此处用 radial-gradient() 就行了 设置
transparent 39.5%
是为了�模糊锯齿background-image radial-gradient(#3d3d4a 39%, transparent 39.5%), conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%)
-
方法二,使用 CSS3 的新属性 mask,隐藏元素的部分区域。
-webkit-mask: radial-gradient(transparent 39.5%, #3d3d4a 39%);
和方法一相比,mask可以使用图片遮罩元素的部分区域,扩展性高些。但IE和Opera都不支持mask属性
如demo,数字后面 % 的添加有各种方法,可以使用js添加。也可以使用伪元素添加,这在日常开发中是没有想到的
&:after
content '%'
把元素设置为 pointer-events none
,除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
对于作为遮罩作用的元素,设置此属性可以避免覆盖了“下面”元素的事件,非常实用
例如要判断浏览器是否支持CSS的conic-gradient
属性。可以使用getComputedStyle()
:
if (getComputedStyle(domElement).backgroundImage !== 'none) {
// 支持属性,相应的代码逻辑
} else {
// 不支持属性,相应的代码逻辑
}
getComputedStyle()
:
- 可以获取当前元素所有最终使用的CSS属性值
- 返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读
- 两个参数,第一个参数:元素(必须),第二个参数:伪元素(非必须)
getComputedStyle()
与style
区别:
相同点:
- 返回的是CSS样式声明对象([object CSSStyleDeclaration])
不同点:
getComputedStyle()
是只读,style
是可读可写getComputedStyle()
获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style
只能获取元素style属性中的CSS样式
Demo: https://jsbin.com/mabitumeja/edit?html,js,output
<div id="styleTest" class="style-test" style="width: 200px; height: 200px"></div>
.style-test
background pink
window.onload=function() {
const styleTest = document.getElementById('styleTest')
console.log('getComputedStyle:', getComputedStyle(styleTest))
console.log('style:', styleTest.style)
}
output:
js操作Dom元素并不包括伪元素。如果想通过js修改伪元素的样式。可以使用addRule()
的方法
document.styleSheets[0].addRule('output:before','transform:' + 'translate(0,' + rangeValue / -100 * (trackWidth - thumbDiameter) + 'px)')
第一个参数是伪元素,第二个参数是相应的样式