linear-gradients

问题 I am aware that you can set the width of a linear gradient using .grey-block { background: linear-gradient(to right, #f9f9f9 0%, #f9f9f9 35%, white 35%, white 100%); } As well as the height .grey-block { background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); } However, is there a way you can set BOTH the height and the width using a the same css line? 回答1: To clarify, the code in the question is not setting the height and width of the gradient. It's adjusting

问题 This question already has answers here : Use CSS3 transitions with gradient backgrounds (16 answers) Closed 10 months ago . First of all, I'm talking of background and not background-color . I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable. The fade effect I want works with background-color but there seems no way to

问题 I saw this question and answer: CSS Gradient arrow shape with inner shadow and gradient border and I'm looking to create the same thing but with an arrow on each side. Here is what the final result would looks like: 回答1: I would do it in 3 steps: create a normal rectangular element with a background gradient (e.g. from orange to red) create a pseudo element ::before with a background color, the gradient is starting with (e.g. orange) create a pseudo element ::after with a background color,

问题 I have a radial gradient that used as a mask-image "fades" an image in to the background-color behind the image. mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); How do I get the same effect with an evenly rectangular gradient on all four sides? I know you can combine gradients and my most current attempt does not seem to have any effect: img { mask-image: linear-gradient(to top, rgba(255,255,255,1

问题 What I'm trying to achieve is a button like Once it's done I need to animate on hover. The closest example I could find is this codepen https://codepen.io/Chester/pen/QPoyjN The problem is the ::after that is required to apply a white background on the button The size of the button might change based on the text length so a solution like the one given here is not valid : Rotate only the Border using CSS Here's what I got so far, the goal is to keep a similar animation but remove the white

问题 I've constructed a grid of hexagons in HTML and CSS and I'm trying to get a linear gradient to span across the entire grid. The HTML and CSS I'm using for the hex grid is below: .hex { float: left; margin-right: -26px; margin-bottom: -50px; } .hex .left { float: left; width: 0; border-right: 30px solid #6C6; border-top: 52px solid transparent; border-bottom: 52px solid transparent; } .hex .middle { float: left; width: 60px; height: 104px; background: #6C6; } .hex .right { float: left; width:

问题 Although I've found similar questions, none explicitly match my goal. I'm trying to display text with a gradient colour, with low opacity (so you can see the background through it), but also with a (matching) solid gradient border (i.e. text-stroke). I've discovered that answers to similar questions develop a workaround by creating a ::before underlay state that replicates a (gradient) border effect, but changing the opacity on the text's natural state just displays the colour of the ::before

问题 Although I've found similar questions, none explicitly match my goal. I'm trying to display text with a gradient colour, with low opacity (so you can see the background through it), but also with a (matching) solid gradient border (i.e. text-stroke). I've discovered that answers to similar questions develop a workaround by creating a ::before underlay state that replicates a (gradient) border effect, but changing the opacity on the text's natural state just displays the colour of the ::before

问题 Based on the MDN documentation this doesn't seem to be explicitly supported. So I tried it as follows in the linked code pen below. I know the nested <div> 's are ugly as can be and don't make for a good reusable style component, but I don't know how else to approach this effect! Any guidance on what approaches to try to accomplish this would be greatly appreciated! Here is a link to a pen demonstrating my current approach: :root { --outer-battle-window-color-0: #7c7874; --outer-battle-window

问题 I am pretty new in CSS3 and I have the following style in a CSS file of my project: .headerDiv { background-image: linear-gradient(#04519b, #044687 60%, #033769); ............................ ............................ ............................ } It is pretty clear to me what linear-gradient(#04519b, #044687 60%, #033769); should do (it creates a vertical gradient as a background of a div with the class name headerDiv . I have to change it the colors of the gradient, so I found on Google