Tag: html

边框半径+背景颜色==裁剪边框: 考虑应用具有border-radius ， border和background-color CSS属性的div ： <div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> Blah </div> 现在考虑一个类似的布局，但在inner-div中指定background-color ： <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE;"> Blah </div> </div> 令我惊愕的是内部的 <div>的background-color遮住了外部的 <div>的边框。这是一个简单的问题示例。实际上，我使用<table>作为交替行颜色的内部元素。而我使用一个<div>作为外部元素，因为border-radius在<table>元素上似乎不起作用。这是一个这个问题的例子jsfiddle 。有没有人有一个解决scheme的build议？

如何用CSS创build一个圆形或方形 – 具有空心的中心？: 它应该基本上是方形或圆形的轮廓 – 我可以相应地进行devise（即，将颜色更改为任何我想要的，更改边框的厚度等）我想将这个圆或正方形应用于其他东西（如图像或其他东西），中间部分应该被挖空，这样您可以看到正方形或圆形下方的图像。我更喜欢它主要是CSS + HTML。

删除额外的空白周围的iframe？: 我在页面中使用iframe，并且偶然发现了一个奇怪的问题。我像这样设置iframe CSS iframe { margin: none; padding: none; background: blue; /* this is just to make the frames easier to see */ border: none; } 但是，iframe中仍然有空白。我在Chrome和Firefox上都testing过，结果是一样的。我四处搜寻，找不到任何东西。 Chrome控制台中也没有显示这个空格。另外，我已经有了以下CSS： html, body { margin: 0px; padding: 0px; border: 0px; width: 100%; height: 100%; } JSFiddle：这里

检测WebP支持: 我怎样才能通过Javascript检测WebP的支持？如果可能的话，我想使用function检测而不是浏览器检测，但是我找不到这样做的方法。 Modernizr（ www.modernizr.com ）不检查它。

div可以像文本区域一样resize: 浏览器允许通过默认拖动angular落来重新调整文本区域的大小。我想知道这个规则是否可以应用于其他元素（例如div）。我知道这个效果可以通过使用jQuery draggable或者jQuery-ui resizablefunction来实现，但是如果可以避免依赖该库，我想用纯html / css来实现。他们的任何CSS规则，我可以申请一个股利，使其行为如此？如果您有任何其他解决scheme，我希望听到它。

无法从Firefox中删除大纲/虚线边框select下拉菜单: 我有一个风格下来，但我不能删除点击在Firefox中的虚线边框。我已经使用outline: none但它仍然无法正常工作。有任何想法吗？ CSS： .styled-select { background: lightblue; font-size: 20px; height: 50px; line-height: 50px; position: relative; border: 0 none !important; outline: 1px none !important; } .styled-select select { background: transparent; border: 0; border-radius: 0; height: 50px; line-height: 50px; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-appearance: none; text-indent: 0.01px; text-overflow: ''; border: 0 none !important; […]

如何select具有某个类的元素？: 我的理解是，使用element.class应该允许分配给某个类的特定元素接收与该类其余部分不同的“样式”。这不是一个关于是否应该使用的问题，而是我想了解这个select器是如何工作的。从互联网上的大量例子来看，我认为这个语法是正确的，不明白为什么这种方法不起作用。这里是一个例子： CSS： h2 { color: red; } .myClass { color: green; } h2.myClass { color: blue; } HTML： <h2>This header should be RED to match the h2 element selector</h2> <div class="myClass"> <h1>This header should be GREEN to match the class selector</h1> <h2>This header should be BLUE to match the element.class selector</h2> </div>

用javascript或Jquery获取textarea文本: 我有一个包含textarea的iframe，如下所示： <html> <body> <form id="form1"> <div> <textarea id="area1" rows="15"></textarea> </div> </form> </body> </html> 我想在父页面中获取textarea文本。我试过这个： var text = $('#frame1').contents().find('#area1').val(); 但是返回一个空string。但是，如果我把一个值放在标签中，这个值将被成功返回： <textarea id="area1" rows="15">something</textarea> 如何从包含iframe的页面获取textarea的值？

使元素不可点击（点击后面的东西）: 我有一个固定的图像，当用户在滚动触摸屏（移动）的行为时，覆盖页面。我想让这个图像“不可点击”或“不活动”或任何其他内容，这样，如果用户触摸并拖动该图像，它后面的页面仍然滚动，就好像图像不在那里“阻止”交互。这可能吗？如果需要的话，我可以尝试提供屏幕截图来举例说明我的意思。谢谢！

HTML / CSS文字背景透明，但文字不是: 所以我有一个问题。我环顾四周，环顾四周，但没有运气。我想使我的身体背景透明，但让文本不透明。因为现在我一直在做同样的不透明。这是我的代码： @charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; opacity:1; } […]