Questions tagged «css»

我有一个选项卡式导航栏，我希望在打开的选项卡上添加阴影，以使其与其他选项卡区分开。我还希望整个选项卡部分上有一个阴影（请参阅底部的水平线），以阴影除打开的所有选项卡的底部。 我将使用CSS3的box-shadow属性来执行此操作，但是我无法找出一种仅对所需部分进行着色的方法。 通常，我会用内容区域（较高z-index）遮盖打开的选项卡的底部阴影，但是在这种情况下，内容区域本身会带有阴影，以便最终覆盖该选项卡。 标签布局 _______ _______ _______ | | | | | | ____ | _______ | __ | | __ | _______ | ______ 阴影线。 阴影将从水平线上升，并从垂直线向外上升。 _______ | | ________________ | | _________________ 这是一个实时示例： 天才有什么帮助吗？

115 html  css  shadow 

.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } 为什么当我将鼠标悬停在鼠标上时，为什么只在不透明度上设置动画？ 此处的演示：http : //jsfiddle.net/7uR8z/ ​

115 css  css-transitions 

::CSS 中的双冒号（）是什么意思？ 例如： input[type=text]::-ms-clear { display: none; }

115 css 

我有一个简单的网页，其中一些Lipsum内容位于页面的中心。该页面在Chrome和Firefox中运行良好。如果我减小窗口的大小，则内容将填充窗口直到不能填充为止，然后添加滚动条并在屏幕外向底部填充内容。 但是，该页面不在IE11中居中。我可以通过弯曲主体来使页面在IE中居中，但是如果这样做，则内容开始从屏幕上移到顶部，并切断内容的顶部。 以下是两种情况。请参阅相关的小提琴。如果问题不明显，请减小结果窗口的大小，以强制其生成滚动条。 注意：此应用程序仅针对Firefox，Chrome和IE（IE11）的最新版本，它们都支持Flexbox的候选推荐标准，因此（理论上）功能兼容性不应该成为问题。 编辑：使用全屏API全屏显示外部div时，所有浏览器均使用原始CSS正确居中。但是，离开全屏模式后，IE会恢复为水平居中和垂直顶部对齐。 编辑：IE11使用非供应商特定的Flexbox实现。柔性箱（“ Flexbox”）布局更新 在Chrome / FF中正确居中和调整大小，在IE11中不居中但正确调整大小 小提琴：http : //jsfiddle.net/Dragonseer/3D6vw/ html, body { height: 100%; width: 100%; } body { margin: 0; } .outer { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; } .inner { width: 80%; } 正确地在所有位置居中，缩小时切掉顶部 小提琴：http : //jsfiddle.net/Dragonseer/5CxAy/ html, body …

115 internet-explorer  css  flexbox  internet-explorer-11 

我有以下代码 div { width:200px; border-bottom:1px solid magenta; height:50px; } 演示 div宽度为200px，因此border-bottom也是200px，但是如果我希望border-bottom-bottom仅100px而又不更改div宽度，该怎么办？

115 html  css 

我想返回一个包含CSS规则所有内容的字符串，就像您在嵌入式样式中看到的格式一样。我希望能够在不知道特定规则中包含什么的情况下执行此操作，因此我不能仅通过样式名称（如.style.width等）将它们拉出。 CSS： .test { width:80px; height:50px; background-color:#808080; } 到目前为止的代码： function getStyle(className) { var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules for(var x=0;x<classes.length;x++) { if(classes[x].selectorText==className) { //this is where I can collect the style information, but how? } } } getStyle('.test')

115 javascript  html  css 

是否可以堆叠多个DIV，例如： <div> <div></div> <div></div> <div></div> <div></div> </div> 这样所有这些内部DIV都具有相同的X和Y位置？默认情况下，它们都相互降低，从而将Y位置增加最后一个上一个DIV的高度。 我感觉某种漂浮物或展示物或其他技巧可能会咬人？ 编辑：父DIV具有相对位置，因此，使用绝对位置似乎不起作用。

115 css  html  stack  css-float 

<ul>显然，在一个元素内，行之间的垂直间距可以使用line-height属性设置格式。 我的问题是，在一个<ul>元素内，如何设置列表项之间的垂直间距？

115 html  css  html-lists 

有什么方法可以与:hover 仅使用 CSS 相反吗？如：如果:hover是on Mouse Enter，是否有一个CSS等效于on Mouse Leave？ 例： 我有一个使用列表项的HTML菜单。当我将其中一项悬停时，会有CSS彩色动画从#999到black。当鼠标离开动画时black，#999如何从项目区域中创建相反的效果？ jsFiddle （请记住，我不想仅回答此示例，而不想回答整个:hover问题。）

115 css  hover 

我正在尝试创建HTML电子邮件，以在所有广泛使用的电子邮件客户端中正确显示。我将整个电子邮件包装在一个表中，我希望它的宽度最多可达到可用宽度的98％，但不大于800像素。像这样： <table style="width:98%; max-width:800px;"> 但是我没有那样做，因为根据此 Outlook 2007不支持CSS width属性。 相反，我正在这样做： <table width="98%"> 有没有办法不用依靠CSS来设置最大宽度？

114 html  email  html-email  css 

我的问题是：给定目标RGB颜色，#000仅使用CSS滤镜将黑色（）重新着色为该颜色的公式是什么？ 为了接受答案，它需要提供一个函数（使用任何语言），该函数接受目标颜色作为参数并返回相应的CSS filter字符串。 这样做的上下文是需要为内的SVG重新着色background-image。在这种情况下，它将支持KaTeX中的某些TeX数学功能：https : //github.com/Khan/KaTeX/issues/587。 例 如果目标颜色是#ffff00（黄色），则一种正确的解决方案是： filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) （演示） 非目标 动画。 非CSS过滤器解决方案。 从黑色以外的其他颜色开始。 关心黑色以外的其他颜色会发生什么。 到目前为止的结果 蛮力搜索固定过滤器列表的参数：https ://stackoverflow.com/a/43959856/181228缺点：效率低下，仅生成16,777,216种可能的颜色（带676,248种hueRotateStep=1）。 使用SPSA的更快的搜索解决方案： https: //stackoverflow.com/a/43960991/181228获得赏金 一个drop-shadow解决方案： https://stackoverflow.com/a/43959853/181228 缺点：不工作的边缘。需要非filterCSS更改和较小的HTML更改。 您仍然可以通过提交非蛮力解决方案来获得接受的答案！ 资源资源 如何hue-rotate和sepia计算： https://stackoverflow.com/a/29521147/181228 例的Ruby实现： LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722 HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

114 javascript  css  math  algebra  css-filters 

使用CSS flex box模型，如何强制图像保持其纵横比？ JS小提琴：http：//jsfiddle.net/xLc2Le0k/2/ 请注意，图像会拉伸或收缩以填充容器的宽度。很好，但是我们还可以拉伸或缩小高度以保持图像比例吗？ 的HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> 的CSS .slider { display: flex; } .slider img { margin: 0 5px; }

114 html  css  flexbox 

是否有CSS选择器通过其内联样式属性值选择此元素？ <div style='display:block'>...</div> 就像是 div[cssAttribute=cssValue]

114 html  css  css-selectors  inline-styles 

如何居中div水平其父里面div用CSS？ <div id='parent' style='width: 100%;'> <div id='child' style='width: 50px; height: 100px;'>Text</div> </div>

114 html  css 

尝试对我的CSS三角形（边框）使用自定义的十六进制颜色。但是，由于它使用边框属性，因此我不确定如何执行此操作。我仅出于兼容性考虑而避免使用javascript和css3。我正在尝试使三角形的背景为白色，且边框为1px（围绕三角形的成角边），颜色为＃CAD5E0。这可能吗？这是我到目前为止的内容： .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px solid #CAD5E0; padding: 4px; position: relative; min-height: 200px; } .container:after { content: ''; display: block; position: absolute; top: 10px; left: 100%; width: 0; height: 0; border-color: transparent transparent transparent #CAD5E0; border-style: solid; border-width: 10px; }​ 我的小提琴：http : //jsfiddle.net/4ZeCz/

114 css  border  css-shapes