linear-gradients 相关问题

线性渐变是一种颜色区域,其从一种颜色平滑地变化到另一种颜色(或多于两种颜色)。

滚动阴影CSS魔术如何工作?

[我从2012年发现了这则臭名昭著的文章。它详细说明了如何创建滚动阴影并且仍然可以很好地工作,但是我真的很想了解该解决方案,但似乎找不到必要的...

回答 1 投票 2

要在css中指定线性渐变以创建旋转器

[我想像图片中那样构建一个微调器,这里是我的代码:html: css::root {--pie-width:100px; --...

回答 1 投票 -2

React-如何在props值上应用带有浏览器前缀的渐变?

我有以下组件:const FeedCardButton = props => {return(

回答 2 投票 0

CSS变换标度ignor z索引和渐变

我在:: after上使用linear-gradient来制作这样的对象,即消失的边框。现在我想使用scale来使其中一个如此活跃(选定),但看起来它忽略了z-index:-1;并显示所有...

回答 1 投票 2

升级react-native(0.60)后,我遇到了React / {Any filename} .h'file not found error with different package错误

无法构建应用程序,我在使用不同的软件包时找不到导入文件时出现错误,因此我尝试通过导入来导入“ {Any filename} .h”,但是反复出现错误...

回答 1 投票 -1

JavaFX条形图的CSS线性渐变

我当前的样式是({0}被替换为特定于条形码的颜色代码)“ -fx-bar-fill:rgb({0});” +“ -fx-background-color:” +“线性(0%,0%)到(0%,100%)” +“停止(0%,派生(-fx-bar-fill,-...] >

回答 1 投票 0

具有形状的渐变

我正在尝试在按钮上进行渐变,但无法使其与按钮的其他部分具有相同的渐变。我尝试在渐变内添加渐变,但是它似乎无法正常工作,因此无法...

回答 1 投票 0

使用范围滑块调整线性渐变

var pos = document.getElementById(“#myRange”)。value; var Slider = document.getElementById(“#myRange”)var g1; slide.oninput = function(){if(pos <50){g1 =((pos / 50)* 33)+ 33; ...

回答 1 投票 0

将线性渐变应用于CanvasPattern(Canvas API)

我有一个重复的简单图案,一个渐变超出了图案的尺寸。可以将线性渐变应用于渲染的图案吗?我尝试过...

回答 1 投票 1

如何在滚动中进行“彩虹”边框的移动

我正在尝试在桌面上的https://codepen.io/'开始编码'按钮(移动的彩虹边框)上重新创建类似于悬停状态的效果,但是我希望在..期间进行移动。 。

回答 1 投票 -2

如何为负值绘制不同的渐变填充?

如何在正负区域都获得渐变填充,而不仅仅是纯色?正区域GRADIENT应该是蓝色负区域GRADIENT应该是红色渐变颜色应该是黑色/ ...

回答 2 投票 0

如何向iOS Safari,Mac Safari,Edge和IE11添加背景线性渐变?

我们正在尝试使用background:linear-gradient()获得以下输出。但是,我们遇到了一个问题,其中CSS没有应用于以下浏览器。问题:...

回答 1 投票 0

使用JavaScript时的动态SVG线性渐变

[我可以在html正文中成功完成此工作,例如... ] ] >>> [[ 两件事: 线性渐变的元素名称是linearGradient,而不是lineargradient。 您必须将止动符附加到linearGradient元素上,而不是defs元素上。 [有关此codepen的示例,请参见此MIT-licensed: // Store the SVG namespace for easy reuse. var svgns = 'http://www.w3.org/2000/svg'; // Create <svg>, <defs>, <linearGradient> and <rect> elements using createElementNS to apply the SVG namespace. // (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) var svg = document.createElementNS(svgns, 'svg'); var defs = document.createElementNS(svgns, 'defs'); var gradient = document.createElementNS(svgns, 'linearGradient'); var rect = document.createElementNS(svgns, 'rect'); // Store an array of stop information for the <linearGradient> var stops = [ { "color": "#2121E5", "offset": "0%" },{ "color": "#206DFF", "offset": "100%" } ]; // Parses an array of stop information and appends <stop> elements to the <linearGradient> for (var i = 0, length = stops.length; i < length; i++) { // Create a <stop> element and set its offset based on the position of the for loop. var stop = document.createElementNS(svgns, 'stop'); stop.setAttribute('offset', stops[i].offset); stop.setAttribute('stop-color', stops[i].color); // Add the stop to the <lineargradient> element. gradient.appendChild(stop); } // Apply the <lineargradient> to <defs> gradient.id = 'Gradient'; gradient.setAttribute('x1', '0'); gradient.setAttribute('x2', '0'); gradient.setAttribute('y1', '0'); gradient.setAttribute('y2', '1'); defs.appendChild(gradient); // Setup the <rect> element. rect.setAttribute('fill', 'url(#Gradient)'); rect.setAttribute('width', '100%'); rect.setAttribute('height', '100%'); // Assign an id, classname, width and height svg.setAttribute('width', '100%'); svg.setAttribute('height', '100%') svg.setAttribute('version', '1.1'); svg.setAttribute('xmlns', svgns); // Add the <defs> and <rect> elements to <svg> svg.appendChild(defs); svg.appendChild(rect); // Add the <svg> element to <body> document.body.appendChild(svg);

回答 1 投票 5

Chrome和Safari浏览器中的线性渐变

我无法在Safari和Chrome中显示线性渐变。在Firefox中显示正常。我正在尝试:背景:-webkit-linear-gradient(center top,#9E9E9E,#454545)重复滚动0 0 ...

回答 5 投票 14

仅为顶部和底部边缘创建线性渐变边框?

使用下面的代码,我只能为元素的底部边缘生成线性渐变边框图像。我如何修改代码以使其同时成为顶级代码? div {/ *渐变闪亮边框* ...

回答 1 投票 3

如何在LinearGradient初始值设定项中使用变量-SwiftUI

我试图在稍后使用cardGradient的结构中执行此操作。 “ 1a”和“ 1b”是资产文件夹中的颜色。 var color1 =“ 1a” var color2 =“ 1b”让cardGradient = ...

回答 1 投票 0

CSS:重复线性渐变,但不重复背景图像

我希望背景具有一组不同的颜色。尝试了以下测试代码,即可完成工作。 body {背景:线性渐变(向右,橙色70%,...

回答 1 投票 0

HCL空间中的4点颜色插值

我正在生成4个点渐变(每个角)。为此,我为HCL空间中插值的每个角设置了颜色。因为这很难做,所以我在使用库(chroma.js)...

回答 1 投票 1

如何三角形顶部和底部边框?

正如你可以在下面的图片中看到,我试图从底部和顶部变形或三角我的股利,但我不知道该怎么做。我只是尝试了几次这样做,但我无法实现......

回答 4 投票 3

我怎样才能正确地添加阴影和渐变到我的形状?

我想作如下设计:我已经尝试过:之后:之前,但它不工作。这里是我当前的代码:{。设计背景:#ea053a;显示:内联块;高度:155px; ...

回答 5 投票 18

© www.soinside.com 2019 - 2024. All rights reserved.