css3

问题 I am facing the issue that I cannot set the same width as its parent inside a flexbox item. Here is the code and the span with the class theSpan doesn't have the same width as its parent. .container { display: flex; } .item1 { flex: 1 1 200px; border: 5px solid yellow; } .item2 { flex: 1 1 200px; border: 5px solid blue; } .item3 { flex: 1 1 200px; border: 5px solid red; } .theSpan { width: 100%; border: 2px solid black; } <div class='container'> <div class='item1'> <span class='theSpan'

问题 I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div . Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out. See example here: https://jsbin.com/dinehoqaro/edit?html,css,output You can see that the expansion is starting from the top left. .circle { background-color: white; border: 1px solid red; border-radius: 50%; width: 50px; height: 50px;

问题 This question already has answers here : Inset border-radius with CSS3 (8 answers) Closed 6 years ago . There're border-radius property to round box corners. But how to round corners inside block, like subtracting circle? Like here: http://malsup.com/jquery/corner/ Curl settings 回答1: This can be done by adding four circular "gradient" background images on top of the normal background image, each positioned at the appropriate corner. There's an example on Lea Verou's blog. From that I've

问题 This question already has answers here : CSS negation pseudo-class :not() for parent/ancestor elements (2 answers) Closed 2 years ago . I need to style the text in all elements of a HTML document except the ones nested in a specific class. I have no control over the HTML, I can only modify the CSS. Here is a piece of code: <div class="container"> <div class="column c1"> <div class="text"> text in column 1 </div> </div> <div class="column c2"> <div class="text"> text in column 2 </div> </div>

问题 I need to reorder the divs when screen size is less than 480px. I don't want to use position: absolute because the height of the green area may vary due to amount of text. I need the small screen order to be red, green, red, green, red, green (each red being on top of the immediate green and width being 100%). Any idea? Many thanks *, html, body { margin: 0; padding: 0; } .container { width: 100%; display: inline-block; box-sizing: border-box; } .full_half { display: inline-block; width: 50%;

问题 How can you detect which CSS animation just finished in JavaScript? The ultimate need is to re-trigger a CSS animation. Due to our HTML hierarchy, we prefer not checking the element's class but instead taking action only when a particular animation ends. If you have a method that allows re-triggering an animation without removing/adding a class, please let us know. Otherwise... our code: page.find( '.button.letter' ).on( 'webkitAnimationEnd', function() { $( this ).removeClass( 'tap_animation

问题 This is probably the simplest question anyone has ever asked on SO but my mind is drawing a blank this morning. Maybe I need more coffee. Basically I'm trying to add some CSS3 transform effects to an element and for whatever reason Firefox isn't playing ball. If you take a look at this fiddle in Chrome you'll see what I want, then if you look at it in Firefox you'll see that it's not the same... This is the CSS for that particular element; -webkit-transform: rotateY(60deg) scale(0.9); -ms

问题 I'm trying to put a background image on a div that is using CSS borders to create a triangle. This is my current efforts so far. It works fine with solid colours, but I am at a loss when it comes to images. HTML <div class="wrapper"> <div class="left triangle"></div> <div class="right triangle"></div> </div> CSS .wrapper { padding:50px 0px; height: 50px; position: relative; width: 300px; background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh

问题 I'm trying to put a background image on a div that is using CSS borders to create a triangle. This is my current efforts so far. It works fine with solid colours, but I am at a loss when it comes to images. HTML <div class="wrapper"> <div class="left triangle"></div> <div class="right triangle"></div> </div> CSS .wrapper { padding:50px 0px; height: 50px; position: relative; width: 300px; background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh

问题 Just wondering if anyone knew how to override the default behavior in Jquery mobile to align the Header title to the left and keep the same format. I can't seem to get it to line up. Here's what I have: <div class="ui-body-x" data-role="header" data-position="fixed"> <div class="ui-grid-x"> <h1 class="ui-link">Add New Record</h1> <div data-type="horizontal" style="top:5px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> <a href="www.google.com"