css

问题 I have some list of vendors in my site, those vendors list are created manually. Live Site Those links are displaying in one single column div code <div class="rte"> <ul class="vendor-list block-grid three-up mobile one-up"> <li class="vendor-list-item" style="font-size:20px"> <a href="/collections/{{ product_vendor | handleize }}"> {{ product_vendor }} </a> </li> </ul> </div> But i wanted to display this list in 3 columns. For example, if i have 30 vendors then show 10 vendors for each

问题 I'm trying to wrap a long word. I have seen this post : How to prevent long words from breaking my div? It works great in a simple case like this : .wrapWords { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } <!-- This wraps correctly

问题 I'm styling a box with a simple gradient background and overlaying it with an SVG background image, like this: HTML: <div class="card-image-none"> <img src="/graphics/16-9.png" class="w-100 img-fluid"> </div> CSS: .card-image-none { height: auto; background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.2) 100%); } .card-image-none:after { content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url('/fontawesome/svgs/solid/quote-right.svg');

问题 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

问题 I started my svg learning. And I want to do some skills bar with the svg line. But there is something I didn't understand. I create 2 lines per skills (one empty, and one with the percentage of knowledge). The problem is : The two first lines have half the height I give with stroke width. And the other lines have the good height... here is a jsbin : http://jsbin.com/lewimonize/edit?html,css,output Thanks in advance 回答1: Short answer: the line is clipped in half by the view box. When you draw

问题 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

问题 this question might be obvious but i'm new in css. I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment? .shape1{ position: absolute; background:red top:512px; width:180px; height:140px; } .shape1:hover { height: 160px; top:492px; transition: 0.2s ease; } 回答1: Your answer You have added the transition property

问题 Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below. <section id="main"> <div class="inner"> <section> <div class="box alt"> <div class="row 50% uniform"> <div class="4u"><span class="image fit"><img src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble<

问题 I need to use both discs and list-style-type: lower-roman; to style a list. But because I'm using content: "•"; in a :before pseudo element to create the disc effect, the second line of the <li> text does not line up. Is there an easier way to do this? eg: i•Some list text which goes onto the second line //need this to be in line with the text above i sub list text1 ii sub list text2 I'm currently using ul>li:before { content: "•"; } ol{ margin-left: 24px; } ol, ul{ list-style-type: lower

问题 Is there a way create a tiled background using a repeating image without it stretching and changing size? I have a pattern which I am using as a background. However I want this to display consistently throughout the site. Currently the pattern repeats correctly, but stretches depending on the size of the container. 回答1: Yes, you can use the property background-repeat body { background-image: url("images/background.jpg"); background-repeat: repeat; } it strech because you dont change the width