css3

问题 I'm not particularly good with jQuery, so a complete code solution would be ideal. The function will: Get the 70% width of the browser's screen. Convert that width into its corresponding px value Set the max width of the #mainContainer using the value got from the conversion/calculation. Here is the CSS style for the container I want to set max-width with: #mainContainer { background-image: url(bg3.jpg); background-repeat: repeat; background-color: #999; width: 70%; padding: 0; min-width:

问题 Does WebKit use OpenGL to render CSS transitions, or does it use software rendering? 回答1: WebKit is just a frontend. It depends on the backend and the hardware support. Google Chrome uses skia as a back-end and it can use software or hardware. So the answer is it depends on the implementation of the back-end and the hardware it is running on. 回答2: From what I know the only hardware accelerated property using transitions is the translate3d transform . Eg: // Normal div{ -webkit-transition: all

问题 I know this is a common issue, and I've already asked a similar one. But I could not find the solution this time. I am trying to vertically center a text which can have different height in a DIV which can have different height. And I am trying to solve this only with CSS, without touching the HTML. Example : http://jsfiddle.net/F8TtE/ <div id="test"> <div id="sumup"> <h1 class="titre">Title</h1> <div id="date">hello guys</div> </div> </div> My goal is to have the text centered vertically and

问题 I have this situation: <div style="width: 100px; padding: 5px 15px 5px">Some text longer than 100px</div> If I set overflow: hidden on the div the text will still go outside the 15px padded area on the right: ++----------------------------+------+ ++----------------------------+------+ ||This text should stop here -| but i| ++----------------------------+------+ ++----------------------------+------+ Can this be done without putting an extra element inside to hold the text. Any solution in

问题 I'm trying to style a table so that each row is a different colour (odd/even). I have the following CSS: #woo tr:nth-child(even) td { background-color: #f0f9ff; } #woo tr:nth-child(odd) td { background-color: white; } However, some of my rows can be hidden and I'd still like the rows to alternate. How can I adjust the above so it gives the appearance of alternate rows, even if the rows that are next to each others aren't necessarily odd and even? 回答1: If you are using jQuery, you can employ

问题 Right now when I do this: -moz-box-shadow: 0 0 200px #00C0FF; -webkit-box-shadow: 0 0 200px #00C0FF; box-shadow: 0 0 200px #00C0FF; it gives a box shadow on all sides. I want it on 3 sides but not the top. How to prevent the shadow from appearing at the top? 回答1: If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges. For example this mark-up: <div class="outer">

问题 I've implemented a fade-in effect using pure Javascript, but I yearn for something more native, like using CSS3. Is there a way to trigger the CSS fade-in effect from Javascript? Thanks. 回答1: HTML: <div id="foo" class="hidden">Hello!</div> CSS: div { -webkit-transition: opacity 1s linear; } .hidden { opacity: 0; } JS: setTimeout(function() { document.getElementById('foo').className = ''; }, 1000); http://jsfiddle.net/RYgsA/ 回答2: here you go HTML <div id="box"></div> CSS #box { width: 100px;

问题 I have an <input type="range"> and want to rotate the thumb - but only the thumb on input. My problem is: When i try to rotate it, it rotates the whole slider. Can someone help me? function slide(event){ event.target.style.webkitTransform = 'rotate(20deg)'; } .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; border-radius: 20px; }

问题 I'm using flex to create a multi column list that adjusts the number of columns based on the width of the container. The problem I found is that if I want to use the full width of the parent by setting flex-grow to 1, the items in the last wrapped row are misaligned, since they try to fill the parent. I found two workarounds that don't work for me: one used media queries, which I can't use because the parent is not the same width of the viewport; the other was using columns , but I can't use

问题 Folks, i have 100 < p> tags and i'm trying to repeat a set of four color to every row in a bellow manner. RED BLUE GREEN PURPLE RED BLUE GREEN PURPLE ....and so on The output generated is not as i desired. The output is RED BLUE GREEN PURPLE RED GREEN RED PURPLE GREEN BLUE RED PURPLE so if you have any suggestion that would be helpful for me, :) here is my css code. <style> p:nth-child(1n) { background: red; } p:nth-child(2n) { background: blue; } p:nth-child(3n) { background: green; } p:nth