css3

问题 I currently have a navbar I've made using Bootstrap 4, I was hoping someone could help me. I cannot get the dropdown to show on hover. At the moment it only works when the tab is clicked then the dropdown menu show. I would like to know how to make the dropdown menu hover? a.dropdown-item:hover { background-color: orange; color: white; text-shadow: 1px 1px grey; } /* Removing outline from navbar tabs */ a#navbarDropdown.nav-link.dropdown-toggle:active, a#navbarDropdown.nav-link.dropdown

问题 I want to create a ring-shaped process spinner with CSS3 or JavaScript, similar to the loading progress spinner in Android. The spinner should rotate continuously and be filled with a solid colour that fades out along the rim (i.e. a conical gradient) as in this picture: How can I achieve this? 回答1: This would be trivially easy if only CSS or SVG had conical gradients! Until the conic-gradient() notation matures and gains support, we can approximate the effect by slicing up the gradient and

问题 This question already has answers here : Centered elements inside a flex container are growing and overflowing beyond top [duplicate] (3 answers) Can't scroll to top of flex item that is overflowing container (7 answers) Closed last year . Could somebody explain why the top section is being cut off here: https://jsbin.com/yuhexoz/edit <div style=" display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; top: 100px; left:100px; width:200px; height:

问题 It is kind of tricky situation I am in now. I have two templates that need to be displayed based on ng-switch like: <div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch ="cardData.uniqueCardsDataFlag"> <div ng-switch-when=true> <div style="background-color: #ccc !important;"> 11111 my custom div </div> </div> <div ng-switch-default> <div class="card"> <div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>

问题 .features { background-color: #0375b4; padding: 40px 100px; float: left; width: 100%; } .features img { width: 100px; } .features-content { text-align: center; } .features-content h1 { font-size: 24px; color: #ffffff; text-transform: uppercase; margin-top: 10px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="features"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="features

问题 html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a href="#">321</a></li> <li><a href="#">123</a></li> </ul> </div><!-- hidden-nav --> <aside class="fixed-col"> <div class="fix-wrap cf"> <div class="fixed-col-inner"> <h1>123</h1> <div class="menu-button"> <a href="#" onclick="return false" class="close-menu"></a> </div><!-- menu-button --> <div class="menu-side"> <ul class=

问题 I have a vertical flexbox container on which I set a specific height and set it to scroll vertically when overflows. The problem is that the flex container won't scroll if its content overflows. Here is a plunker that demonstrate what i'm talking about: http://plnkr.co/edit/3t4cuxMSGuNr88u0Whdl?p=preview. .flex-container { display: flex; flex-direction: column; overflow-y: scroll; height: 600px; width: 400px; } .block-container { overflow-y: scroll; height: 600px; width: 400px; margin-left:

问题 So I've been using a shadow box inset to make a inner glow kind of making the edges blurry and shadowy like for a edge burn look. I'm trying to use it for the top and bottom only and not for the left/right sides. But it's not working. I'm using it on a overflow: auto <div> so that it can scroll and have a nice effect. Here's my css: #content { font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif; line-height:1.2em; height: 400px; width: 500px; overflow: auto; float: right; padding: 0

问题 I have created a html layout and using css3 @font-face . Here is my code @font-face { font-family: 'MyriadProRegular'; src: url('myriad.eot'); src: url('myriad.eot?#iefix') format('embedded-opentype'), url('myriad.woff') format('woff'), url('myriad.ttf') format('truetype'), url('myriad.svg#MyriadProRegular') format('svg'); } and i am using font-family: 'MyriadProRegular'; it's work in all browsers accept IE. Please help. 回答1: I can't recommend Font Squirrel enough for this. Just run through

问题 I am using to check my CSS http://jigsaw.w3.org/css-validator but I get error for -webkit-border-radius, -moz-border-radius and border-radius. I know that this site test for v2.1 and all these border-radius is from v3. So why they don't use CSS v3 as testing? Or CSS v3 should't be used? 回答1: They do, you just need to select the profile under More Options. The default is CSS level 2.1 as that's the most complete and final standard as of now. CSS level 3 is still in its early drafting stages —