Tag: css3

CSS – 如何样式选定的单选button标签？: 我想添加一个样式到一个单选button的选定标签： HTML： <div class="radio-toolbar"> <label><input type="radio" value="all" checked>All</label> <label><input type="radio" value="false">Open</label> <label><input type="radio" value="true">Archived</label> </div> CSS .radio-toolbar input[type="radio"] {display:none;} .radio-toolbar label { background:Red; border:1px solid green; padding:2px 10px; } .radio-toolbar label + input[type="radio"]:checked { background:pink !important; } 任何想法我做错了什么？

加长的六angular形button只使用一个元素: 我想用CSS创build一个像这样的button，而不使用其他元素。 button图像由于button有一个border ，我想我通常都需要:before和:after元素在一边创build一个箭头。所以要在每一边制作一个箭头，我需要链接中的另一个span元素。我试过的第二种方法是你在下面看到的。但是采用这种解决scheme，它们没有正确居中，箭头的每一边的长度都不相同。有人有一个解决scheme？ /* General Button Style */ .button { display: block; position: relative; background: #fff; width: 300px; height: 80px; line-height: 80px; text-align: center; font-size: 20px; text-decoration: none; text-transform: uppercase; color: #e04e5e; margin: 40px auto; font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; } /* Button Border Style */ .button.border { border: […]

使用CSS剪切angular落: 我正在寻找“削减”一个div的左上angular，就好像你已经把页面的一angular折起来一样。我想在纯CSS中做，有没有什么方法？

如何使flexbox儿童的父母身高达到100％？: 我正在尝试在Flexbox内填充Flex项目的垂直空间。 .container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; background-color: red; } .flex-2-child { height: […]

纯粹的CSS，使字体大小响应基于dynamic数量的字符: 我知道这可以很容易地用Javascript解决，但我只对纯粹的CSS解决scheme感兴趣。我想要一种dynamic调整文本大小的方法，使它始终适合固定的div。这里是示例标记： <div style="width: 200px; height: 1em; overflow: hidden;"> <p>Some sample dynamic amount of text here</p> </div> 我在想，也许这可能是通过在ems中指定容器的宽度，并获取字体大小来inheritance该值？

Google Chrome中是否有“字体平滑”？: 我正在使用谷歌网页字体，他们罚款超大字号，但在18px，他们看起来很糟糕。我已经在这里和那里看到，有字体平滑的解决scheme，但我没有find任何解释清楚的地方，我发现的几个片段根本不工作。我的h4在几乎所有浏览器上看起来都很糟糕，但是Chrome是最糟糕的。在Chrome中，几乎所有的字体看起来都很糟糕。任何人都可以指向正确的方向吗？也许你知道一个解释清楚的资源？谢谢！示例屏幕＃1 该屏幕截图显示了https://www.dartlang.org/的主页，这是一种由Google制作的编程语言（因此我们可以暗示该网站也是由Google构build的）并使用Google Webfonts。屏幕截图显示了左侧的Google Chrome浏览器，右侧的Firefox / Internet Explorer浏览器：示例屏幕＃2 此屏幕截图使用Typekit提供的网页字体显示Adobe.com上的产品信息页面。 Adobe和Typekit是字体的专业人士。屏幕截图显示了右侧的Google Chrome浏览器，左侧是Firefox / Internet Explorer：

左alignment元素中心网格中的最后一行: 我有一堆相同大小的块设置为display:inline-block div内的text-align:center设置为alignment块。 | _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____| |_____| |_____| |_____| | | _____ _____ _____ _____ | | | | | | | | | | | | […]

在CSS3animation结束时保持最终状态: 我在一些设置为opacity: 0;元素上运行animationopacity: 0; 在CSS中。 animation类应用onClick，并使用关键帧将不透明度从0更改为1 （等等）。不幸的是，当animation结束时，元素会回到opacity: 0 （在Firefox和Chrome中）。我的自然思想是animation元素保持最终状态，压倒他们的原始属性。这是不是真的？如果没有，我怎么能得到这样的元素呢？代码（不包括前缀版本）： @keyframes bubble { 0% { transform:scale(0.5); opacity:0.0; } 50% { transform:scale(1.2); opacity:0.5; } 100% { transform:scale(1.0); opacity:1.0; } }