Tag: css3

CSS3 box-shadow：inset只能做一两面吗？ 像边框？

我想知道在css3中支持边特定的内部阴影。 我知道这在支持的浏览器上效果很好。 div { box-shadow:inset 0px 1px 5px black; } 我只是好奇，是否有办法实现这样的事情： div { box-shadow-top:inset 0px 1px 5px black; }

animationCSS3：显示+不透明度

我有一个CSS3animation的问题。 .child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } 此代码仅适用于删除显示更改。 我想在hover之后改变显示，但不透明度随着转换而改变。

在CSS中设置最大字符长度

我正在为学校做出反应的网站，我的问题是： 如何在我的网站（如75个字符）上设置句子（带CSS）的最大字符长度，当我有一个非常大的屏幕，句子将不会超过75个字符。 我已经尝试了一个最大宽度，但这混乱了我的布局。 我正在使用flexbox和mediaqueries使其响应。

创build闪电devise（如Flash）

我正尝试在CSS中重新创buildFlash（DC漫画）（或者Big Bang Theory的Sheldon Cooper穿的T恤）的闪电符号。 这将会像星级评级系统一样，只是一个“闪电评级系统”而已。 但是，因为我试图保持HTML到最低限度，我想只在CSS样式。 我已经到了： html, body { margin: 0; height: 100%; background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); } .wrap { height: 50vw; width: 50vw; position: relative; margin: 0 auto; } .circ:hover{ background:gray; } .circ:hover .bolt{ background:gold; } .circ { height: 50%; width: 50%; background: […]

奇怪的渐变边框效果

在以linear-gradient为背景的元素上应用透明边框时，会产生奇怪的效果。 注意元素的左右两边没有合适的颜色（它们有些切换），而且很奇怪。 HTML <div class="colors"> </div> CSS .colors { width: 100px; border: 10px solid rgba(0,0,0,0.2); height: 50px; background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5); } 为什么这会在元素的左右两侧显示出奇怪的效果，我该怎么办呢？ 这是小提琴： http : //jsfiddle.net/fzndodgx/3/

如何将字体真棒图标添加到input字段？

如何使用Font Awesome中包含的search图标进行input？ 我在我的网站上有一个searchfunction（基于PHPmotion），我想用于search。 代码如下： <div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color: #ffffff" /> <input type="image" src="http://viddir.com/themes/defaulthttp://img.dovov.comsearch.jpg" height="30" width="30" border="0" style="float:right;"/> <div […]

CSS：在图像周围创build白色辉光

我如何创build一个白色的辉光作为未知大小的图像的边界？

如何在样式表中只定位IE（​​任何版本）？

我有一个inheritance的项目，有些地方是一片混乱。 这是其中之一。 我只需要瞄准IE（任何版本）。 #nav li { float: left; height: 54px; background: #4f5151; display: table; border-left: 1px solid grey; } 要清楚的是： 在embedded式样式表中，并且没有向html中的标签添加ID或类， 只有在用户使用IE 时才需要应用边框样式。 我怎样才能做到这一点？ 编辑：find一个Firefox的解决scheme，编辑问题来反映这一点。

在Twitter Bootstrap中创build圆angular的正确方法

我刚刚开始使用Twitter Bootstrap ，这里有一个问题。 我正在创build自定义<header>块，我希望它的底angular四舍五入。 是否有任何“正确”的方式来做到这一点，通过使用预定义的类，或者我必须手动指定它，如： border-radius: 10px; // and all that cross-browser trumpery 现在，我使用css样式。 也许最好less用这个问题？

HTML5inputtypes范围显示范围值

我正在做一个网站，我想使用范围滑块（我知道它只支持webkit浏览器）。 我已经完全整合并且工作正常。 但我想用文本框来显示当前的幻灯片值。 我的意思是，如果最初的滑块值为5，所以在文本框中它应该显示为5，当我滑动文本框中的值应该改变。 我可以只使用CSS或HTML做到这一点。 我想避免JQuery。 可能吗？