Tag: css3
以百分比（％）和像素（px）或em为边界半径
如果我使用边界半径的像素或em值 ，则即使边缘半径大于元素的最大边，边缘半径始终为圆弧或丸形 。 当我使用百分比时 ，边缘半径是椭圆形的，从元素每边的中间开始，形成一个椭圆形或椭圆形 ： 边界半径的像素值： div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> 边界半径的百分比值： div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> 为什么百分比中的边界半径与像素值或em值设置的边界半径的作用方式相同？
任何方式来声明一个框的大小/部分边框？
任何方式来声明一个大小/部分边框到css3的框？ 例如一个350px的框，只显示60px的边框底部。 我认为这可能是非常有用的。 例子：
CSS来停止图像下方的文字环绕
我有以下标记： <li id="CN2787"> <img class="fav_star" src="images/fav.png"> <span>Text, text and more text</span> </li> 我想这样做，如果文字换行，它不会进入图像的“列”。 我知道我可以用table （我正在做的）做到这一点，但是由于这个原因，这是不可行的。 我已经尝试了以下没有成功： li span {width: 100px; margin-left: 20px} .fav_star {width: 20px} 我也尝试了float: right 。 谢谢。 编辑：我想它看起来像这样： IMG Text starts here and keeps going… and wrap starts here. 不是这样的： IMG Text starts here and keeps going… and wrap starts in the space […]
Twitter Bootstrap：在导航栏中使用`.btn`类的正确方法是什么？
我正在使用一个导航栏的标准导航的东西，我想包括login和注册button。 我正在使用btn btn-large btn-success类a标签，默认情况下，navbar不支持使用嵌套的btn 。 结果是这样的： 当它盘旋时，它performance为： 我的问题基本上是：我做错了吗？ 有什么我失踪？ 以为在我为.btn重新定义CSS类之前，我会问。 在一个导航栏内。 谢谢。
CSS3：未经检查的伪类
我知道有一个官方的CSS3 :checked伪类，但是有一个:unchecked伪类，他们有相同的浏览器支持？ Sitepoint的参考没有提到一个，但是这个whatwg规范 （不pipe是什么）。 我知道当:checked和:not()伪类相结合时，可以达到相同的结果，但我仍然好奇： input[type="checkbox"]:not(:checked) { /* styles */ } 编辑： W3C推荐相同的技术 未选中的checkbox可以使用否定伪类来select： :not(:checked)
当高度未知时，用flexbox垂直居中时发出问题
我的布局有一个容器flex-container和一个孩子。 HTML： <div class="flex-container"> <div>text</div> </div> 容器和孩子有一个未知的高度 。 目标是： 如果孩子的身高低于容器的高度，则会出现水平和垂直居中。 如果孩子的身高高于容器的高度，则调整到顶部和底部，我们可以做滚动。 scheme： 以flexbox为中心的最快方法是： .flex-container { display: flex; align-items: center; /* vertical */ justify-content: center; /* horizontal */ width: 100%; height: 300px; /* for example purposes */ overflow-y: scroll; background: #2a4; } .flex-container > div { background: #E77E23; width: 400px; } <div class="flex-container"> <div>Lorem ipsum dolor […]
是否有可能在CSS3盒阴影设置透明度？
是否有可能在盒子阴影上设置透明度？ 这是我的代码： box-shadow:10px 10px 10px #000; -webkit-box-shadow:10px 10px 10px #000; -moz-box-shadow: 10px 10px 10px #000;
纯CSScheckbox图像replace
我有一个表格中的checkbox列表。 （行中的许多CB之一） <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr> <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr> <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr> <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </label></td></tr> 我想用一对自定义开/关图像replacecheckbox图像，我想知道是否有人对CSS如何做一些更好的理解？ 我发现这个“CSS忍者”教程，但我不得不承认find它有点复杂。 http://www.thecssninja.com/css/custom-inputs-using-css 据我所知，你可以使用伪类 td:not(#foo) > input[type=checkbox] + label { background: url('http://img.dovov.comoff.png') 0 0px no-repeat; height: 16px; padding: 0 0 0 0px; } 我的期望是，通过添加上面的CSScheckbox将至less默认显示在closures状态的图像，然后我会添加以下来获得ON td:not(#foo) […]
rgba（0,0,0,0）和透明有什么区别？
在我的其他问题之一 ，修复渲染问题的解决scheme是通过使用值rgba(255, 255, 255, 255)而不是transparent. 我们使用rgba(0, 0, 0, 0)进行testing，这仍然纠正了这个问题，这意味着它是导致错误的transparent的定义。 但是，查看transparent的W3C CSS3规范 （和MDN参考 ），发现rgba(0, 0, 0, 0)和transparent应该是相等的： 透明 完全透明。 这个关键字可以被认为是透明黑色的简写，rgba（0,0,0,0），这是它的计算值。 那么给了什么？ 为什么两个看似相同的值会产生不同的结果呢？ 我已经研究了RGBA 的格式 ，并寻找类似的问题（无济于事）。 每个提到从transparent转换到rgba(0,0,0,0)问题/答案总是有“应该”或“依据”in。（例如这里 ）。 实际的区别是什么？为什么它会改变输出？ 注意：这在大多数（如果不是全部的话）Internet Explorer版本中都会发生。 我们也知道它发生在Firefox的某些版本中。 但是Chrome和Safari不显示这种行为，导致我们相信在-webkit有这种补丁。 为了能够提交这个错误，我们需要使用最less量的代码重现问题。 所以，从我的另一个问题转移，这里是使用transparent vs rgba(0,0,0,0) ，以及当我们使用两者时会发生什么。 透明 @keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid […]
无论如何，animation用CSSanimation的省略号？
我试图让一个省略号animation，并想知道如果这是可能的CSSanimation… 所以可能是这样的 Loading… Loading.. Loading. Loading… Loading.. 基本上就是这样继续下去 有任何想法吗？ 编辑：像这样： http : //playground.magicrising.de/demo/ellipsis.html
