Tag: css3
是否有可能只改变hover的rgba背景颜色的阿尔法？
我有一组不同的rgba背景颜色，但相同的阿尔法。 是否可以编写一个只改变rgba属性的透明度的CSS样式？ 代码的一个简单例子： <a href="#"><img src="" /><div class="brown">Link 1</div></a> <a href="#"><img src="" /><div class="green">Link 2</div></a> 和风格 a {display: block; position: relative} .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);} .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);} 我想要做的是编写一个单一的样式，当<a>hover时改变不透明度，但保持颜色不变。 就像是 a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
隐藏的CSS盒子阴影（z-index不能修复）
我的#primaryNav div上有个阴影。 不幸的是，阴影正在被以下#page元素的背景覆盖/隐藏。 我试图设置一个z-index为100到#primaryNav和z-index为-100到#page，但是这不能解决我的问题。 任何想法我做错了什么？
强迫孩子服从CSS中父母弯曲的边界
我有另一个div内的div。 #outer和#inner 。 #outer有弯曲的边界和白色背景。 #inner没有弯曲的边框和绿色背景。 #inner超出了#inner的曲线边界。 反正有阻止呢？ #outer { display: block; float: right; margin: 0; width: 200px; background-color: white; overflow: hidden; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #inner { background-color: #209400; height: 10px; border-top: none; } <div id="outer"> <div id="inner"></div> <!– other stuff needs a white background –> <!– bottom corners needs […]
如何将CSS3转换应用于除background-position之外的所有属性？
我想申请一个CSS过渡到除了background-position之外的所有属性。 我试图这样做： .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease 0s; transition: background-position 0s ease 0s; } […]
LESS是否有“扩展”function？
SASS有一个名为@extend的特性，它允许select器inheritance另一个select器的属性，但不需要复制属性（如mixin）。 LESS是否也有这个function？
页眉/页脚/导航标签 – 这些在IE7，IE8和浏览器发生了什么比不支持HTML5？
我急于开始使用Html5特别是<header>/<footer>/<article>/<nav>标记。 如果浏览器不支持这些，会发生什么？ 此外，我需要这些样式：例如： nav边界和边距等。你知道标准的CSS的东西。 所以，如果我使用nav标签风格，那么IE7和IE8等将会忽略这个？
在IE9的盒子阴影不会渲染使用正确的CSS，适用于Firefox，Chrome
我试图模拟浮动模式框types的东西，但有一个问题与IE9和它的盒子阴影实现。 以下是我正在使用的代码的一个总结，它可以复制问题： <html> <head> <title>Sample page</title> <style> .content-holder { border-collapse: collapse; } .back { background-color: #a8c0ff; padding: 100px; } .inner { background-color: #fff; text-align: center; padding: 50px; box-shadow: 0px 0px 20px #000; } </style> </head> <body> <table class="content-holder"> <tr> <td> <div class="back"> <div class="inner"> <h2>Heading</h2> <p class="subtext">Some text here</p> <p>More text</p> <a class="button" href="#">A button</a> […]
用ng-show和ng-animate来上下滑动效果
我试图使用ng-animate来获得类似于JQuery的slideUp()和slideDown() 。 只有我宁愿使用ng-show 我正在看这里的ng-animate教程 – http://www.yearofmoo.com/2013/04/animation-in-angularjs.html ， 我可以在提供的示例中重现淡入/淡出效果。 我怎么能改变CSS来获得上下滑动的行为？ 另外，如果可能的话，最好是CSS不知道像素的组件高度。 这样我可以重用CSS不同的元素。
将鼠标hover在父项上时，可以调整子元素
在父元素上hover时如何更改子元素的样式。 如果可能的话，我更喜欢CSS解决scheme。 是否有任何解决scheme可以通过：hoverCSSselect器。 实际上我需要在面板上hover的时候改变面板里的选项栏的颜色。 希望支持所有主stream浏览器。
在CSS中旋转地球仪
我正在用CSS创build一个旋转的地球效应。 我已经在CSS中创build了地球： body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotate; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes […]
