css3

问题 Is there a way to make the following: #id { border-radius: 100px; width: 100px; height: 100px; } <div id="circle"> <h3>Hello</h3> </div> A round div with the text centered vertically and horizontally . At the same time keeping the circle responsive. By that I mean having a width of say 50% of the containing div , at the same time keeping the height percentage equal as to make a circle. And changing the static 100px to pertentages makes the circle oval. 回答1: Viewport Units If you use the same

问题 I'm using the technique described here to make an iframe (video) responsive. Essentially the iframe is absolutely positioned within a wrapper element with a 100% width. The wrapper element has it's padding set based on the aspect ratio of the video: .embed-responsive { position: relative; /* video height / video width */ padding-bottom: 56.2%; height: 0; overflow: hidden; } .embed-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } I need to be able to center

问题 How i fix this? First "D" is rendered on Chrome 31.0.1650.63 m and second is rendered on IE11. Update: adding -webkit-font-smoothing: antialiased; the problem remains... It could be a problem with the video card? Update 2: css font code: @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/font1.woff) format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src:

问题 I have a which I am going to make into a button. The top half should be #ffd41a and the bottom half should be #fac915. Here is a link to the button at present. http://jsfiddle.net/WnwNW/ The problem that I'm facing is how should I deal with two background colors. Is there a way to do what I'm trying to do without the need for addition divs or spans? Can I have two background attributes within the same CSS class? 回答1: CSS3 provides a way to do this background-image: linear-gradient(bottom,

问题 My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform . In my case I have two div s absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like: <div id="below"></div> <div id="above"><div id="nav"></div></div> The above div has border-radius: 50% and clips the nav div . In CSS it goes like (minimal

问题 Lets say i have a list of elements : <ol> <li>First</li> <li>Second</li> <li>Third</li> </ol> When i hover a list item , i need to be able to get more info about each subject. I did this with CSS :after pseudo-element . ol { list-style-type: decimal-leading-zero; } li:hover:after { content: " + More info"; } Here is a jSfiddle Now when i hover on the More info text , i want to change it's color . I don't really get it how to acheive this effect . i have tried the following css rules , but it

问题 I'm having an issue with webfonts only in Firefox, all other browsers (including IE) work perfectly. My issues is that the webfonts won't load at all. I've looked at this possible solution, editing the htaccess file (http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems) but I've had no luck. The only other thing that I can say is in Firefox's error console I get the following warning: Error in parsing value for "src". Skipped to the next declaration. Here's a sample of

问题 I'm working on a HTML5 / CSS 3.0 / MVC 3 project in Visual Studio 2010. Every time I restart VS and then open a CSS file, it's always set to 'CSS 2.1'. Is there a way to tell VS I want to use CSS 3.0 always (or at least by default)? BTW, I have looked under "Tools>Options>Text Editor>HTML" - no CSS options, default is HTML5. I have also looked under "Tools>Options>Text Editor>CSS" - no version option as far as I can see. Thanks, Michael 回答1: I had a similar problem after SP1. I had to

问题 I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it should go all the way up to the letter A. What is causing this? #container { height: 180px; display: flex; flex-flow: row; align-items: stretch; border: 1px dashed gray; } table { display: flex; flex-flow: row; align

问题 I was given a design today that is a circle moving along a curved line. I created a JSBin with the progress I have made so far with pure css but I feel I'm on the wrong direction. I think maybe this would be better done with canvas but I'm not sure where to begin. This is not just drawing along a line its also filling the bars. Fiddle Here is the design: Here is how close I have got so far with CSS: 回答1: Here's how to animate your circle along your curved line (which is a Cubic Bezier Curve).