Tag: css3

无法使用Bootstrap 3更改占位符颜色: 两个问题：我正在试图使占位符文本为白色。但它不起作用。我正在使用Bootstrap 3. JSFiddle demo 另一个问题是如何更改占位符颜色不全球。也就是说，我有多个字段，我只想要一个字段有白色的占位符，其他字段都保持默认的颜色。提前致谢。 HTML： <form id="search-form" class="navbar-form navbar-left" role="search"> <div class=""> <div class="right-inner-addon"> <i class="icon-search search-submit"></i> <input type="search" class="form-control" placeholder="search" /> </div> </div> </form> CSS： .right-inner-addon { position: relative; } .right-inner-addon input { padding-right: 30px; background-color:#303030; font-size: 13px; color:white; } .right-inner-addon i { position: absolute; right: 0px; padding: […]

CSS：变换：翻译（-50％，-50％）使文本模糊: 我想中心我的div和我使用这种方法，但它使我的文本里面的div模糊： <!– language: lang-css –> #div { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 有什么办法可以让我的div居中？

为什么在这个例子中，无单位的行高与百分比或时间行为不同？: 我为以下CSS的行为困惑，也在这个小提琴中说明。 <style type="text/css"> p { font-size: 14px; } .percentage { line-height: 150%; } .em-and-a-half { line-height: 1.5em; } .decimal { line-height: 1.5; } .smaller { font-size:50%; } .caption { font-weight: bolder; font-size: 80%; } </style> <p class="caption">default line spacing</p> <p>This tutorial provides a brief introduction to the programming <span class="">language</span> by using one of its […]

如何使用CSS（和JavaScript？）创build一个模糊的“磨砂”背景？: 我正在尝试用HTML5，CSS3和JavaScript来创build一个可以在webkit浏览器上工作的iOS 7风格的磨砂外观。从技术上讲，给以下的HTML： <style> #partial-overlay { width: 100%; height: 20px; background: rgba(255, 255, 255, .2); /* TODO frost */ position: fixed; top: 0; left: 0; } </style> <div id="main-view"> <div style="width: 50px; height: 50px; background: #f00"></div> To my left is a red box<br> Now there is just text<br> Text that goes on for a few […]

用CSS垂直居中旋转的文本: 我有以下的HTML： <div class="outer"> <div class="inner rotate">Centered?</div> </div> div.outer是一个狭窄的垂直条。 div.inner旋转90度。我希望文字“居中？” 出现在它的容器div的中心。我不知道任何一个div的大小。这接近： http : //jsfiddle.net/CCMyf/2/ 。你可以从jsfiddle中看到文本在transform: rotate(-90deg)之前是垂直居中的transform: rotate(-90deg)风格被应用，但是稍后有些偏移。当div.outer短时，这一点尤为明显。是否可以在不知道任何尺寸的情况下垂直居中？我还没有find解决这个问题的任何transform-origin价值。

带元素前面使用CSS: 我不知道如何使用CSS将图像放在前面。我已经尝试将z-index设置为1000，并将其置于相对位置，但仍然失败。这里的例子 – #header { background: url(http://placehold.it/420×160) center top no-repeat; } #header-inner { background: url(http://placekitten.com/150/200) right top no-repeat; } .logo-class { height: 128px; } .content { margin-left: auto; margin-right: auto; table-layout: fixed; border-collapse: collapse; } .td-main { text-align: center; padding: 80px 10px 80px 10px; border: 1px solid #A02422; background: #ABABAB; } <body> <div id="header"> […]

使用CSSdevise列表的每个第三项？: 是否有可能为每个第三个列表项目添加样式？目前在我的960px宽的div我有左侧浮动框，并显示在3×3网格视图中的列表。他们也有一个30px的右边距，但是因为第三个第六和第九个列表项有这个边距，所以他们跳下去，使得网格显示错误第三，第六，第九，如果没有给他们一个不同的class级，还有没有保证金的权利，还是唯一的办法吗？

CSS插入边框: 我有一个关于CSS边界的简单问题。我需要创build一个纯色embedded边框。这是我正在使用的CSS的位： border: 10px inset rgba(51,153,0,0.65); 不幸的是，创build一个3D脊形边框（忽略广场和黑暗的说明框）： http://dl.dropbox.com/u/12147973/border-current.jpg 这是目标： http://dl.dropbox.com/u/12147973/border-boal.jpg 有任何想法吗？

如何使一个光滑的虚线边框旋转animation，如“行军ant”: 我正在使用“齿轮和链”的cssanimation，但无法创build“平滑”的边框旋转序列。你可以看到这个小提琴如何（当前）我正在使用一个伪元素来产生“旋转”的效果。这是通过在白色虚线和虚线金色边框之间“切换”来完成的，使得它看起来像是“边框正在旋转”。我拥有的 #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */ -o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */ animation: rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */ } #two{ -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: […]

Twitter Bootstrap中的圆桌: Bootstrap 3已经在桌子上掉落了圆angular。请问我应用哪种types的应用程序，以便在我应用.table-bordered类时将它们还原？ UPDATE 到目前为止，我已经来到这个代码，没有任何效果。从Bootstrap 2.3.2获取的CSS： .table-bordered { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; } .table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered […]