linear-gradients

问题 This is what it should look like: Attempts so far: Using a gradient background plus an inner element to cover it and leave just an outer "border". The background is obviously not transparent . body { background: #242424; height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; color: #FFFFFF; } div { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100vh; } h1 { margin:

问题 Hi everyone I need to create border dashed gradient like in this picture.Heres my CSS code.Please anyone help me. .Rectangle-5 { margin: 51px 0px 0px 35px; display: inline-block; width: 370px; height: 280px; border-radius: 3px; border: 1px dashed; border-image-source: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f); border-image-slice: 1; } 回答1: New answer Here is an improvement version of the initial answer with less of code. The idea is to rely on multiple background and adjust

问题 I need some help. There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container. Here are the results: https://jsfiddle.net/rsze93wk/3/ Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text

问题 I found this infamous article from 2012. It details how to create scrolling shadows and still works beautifully but I really want to understand the solution and I can't seem to find the necessary information online. Here is the minified code originally created (blog-post) by @kizmarh and improved by @leaverou: .scrollbox { overflow: auto; width: 200px; max-height: 150px; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0),

问题 I'm applying a basic linear-gradient like this: background-image: linear-gradient(to top, red, rgba(0,0,0,0)); this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color: here's chrome (how it is supposed to be): and here's safari I've tried prefixing it with -webkit- , changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this? here's a fiddle https://jsfiddle.net

问题 My goal is to create a diagonal gradient with multiple colors as the background of an ellipse. A horizontal or vertical gradient can be done with the code below. I basically draw rectangles with gradient shadings and clip an ellipse out of it. Here's my horizontal gradient: The code for a horizontal gradient: var cb = writer.DirectContent; var boundingBox = new Rectangle(200, 200, 700, 350); //draw a path, for example an ellipse cb.Ellipse(boundingBox.Left, boundingBox.Bottom, boundingBox

问题 I have created my own navbar and would like to set up a simple gradient background color for it. So far I have the following which works fine for me in newer browsers but I am not sure what I have to add here to cover IE8 and IE9 as well (I am not interested in older versions). Also, I came across filter: progid ... when searching for this. Can someone tell me if this needs to be added here as well to cover common browsers or if I need to add or change anything else for that ? I would like to

问题 I am trying to create an animated repeating-pattern (diagonal stripes sliding horizontally), as placeholder for a loading block ( li in this case). How can I make the animation smooth/continuous giving the illusion the pattern is infinitely sliding? How to calculate the element width so that the pattern is continuous? (stripes shouldn't look broken/interrupted). How to make it loop looking like it is not restarting but rather sliding infinitely? (the 100% frame should pass to the 0% frame

问题 I have a striped divider in CSS, with repeating linear gradient, but it is doing some strange thing, here is an image : As you can see, the thickness of some of the stripes are not the same, I would like to have the striped divider like this, but all with the same "font-weight", I tried to fix the code adding or reducing pixels, but not working Here is the code : .striped_divider { height: 20px; background: -webkit-repeating-linear-gradient(135deg, transparent 2px, transparent 7px,#cccccc 8px

问题 I'm having trouble with repeating-linear-gradient with tables. Basically, I can't make it look nice with tables, especially on Chrome. Even though I apply said rule to a tr element, it looks like td elements inherit it and instead of having a continuous stripes, I get 'jagged' ones (=stripes do not continue over cell borders). .striped { background: repeating-linear-gradient( 45deg, #FFFFFF, #FFFFFF 10px, #DDDDDD 10px, #DDDDDD 20px )} Here's a Codepen illustrating the issue: http://codepen.io