程序设计 css

16

我在stackoverflow上找到了以下示例：单独使用CSS绘制圆太好了但是我想知道如何修改该示例，以便可以在圆圈中间添加文本？我还发现了这一点：在CSS中以圆形为中心垂直和水平居中放置文本（例如iPhone通知徽章）但由于某种原因，它对我不起作用。当我创建以下测试代码时： <div class="badge">1</div> 而不是圆形，而是椭圆形。我正在尝试使用代码，以查看如何使它工作。

156 css css-shapes

2

有没有一种方法可以在一个元素上使用两个CSS3框阴影？

我正在尝试在上面有两个阴影的Photoshop模型中复制按钮样式。第一个阴影是内部的打火机阴影（2px），第二个阴影是按钮本身（5px）外部的投影。在Photoshop中，这很容易-内部阴影和阴影。在CSS中，我显然可以拥有一个，但不能同时拥有两个。如果您在浏览器中尝试下面的代码，则会看到该框阴影将覆盖插入的框阴影。这是插图框阴影： box-shadow: inset 0 2px 0px #dcffa6; 这就是我想要的按钮上的阴影： box-shadow: 0 2px 5px #000; 对于上下文，这是我的完整按钮代码（带有渐变和全部）： button { outline: none; position: relative; width: 160px; height: 40px; font-family: 'Open Sans', sans-serif; color: #fff; font-weight: 800; font-size: 12px; text-shadow: 0px 1px 3px black; border-radius: 3px; background-color: #669900; background: -webkit-gradient(linear, left top, …

156 css

6

自定义li列表样式，带有超棒的字体图标

我想知道是否有可能利用超赞字体（或任何其他标志性字体）类来创建自定义<li>列表样式类型？我目前正在使用jQuery来做到这一点，即： $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); 但是，当<li>文本在页面上换行时，这不能正确设置样式，因为它认为图标是文本的一部分，而不是实际的项目符号。有小费吗？

156 css html-lists font-awesome

5

为什么flexbox会拉伸我的图像而不是保留宽高比？

Flexbox在将图像拉伸到其自然高度时具有这种行为。换句话说，如果我有一个带有子图像的flexbox容器，并且我调整了该图像的宽度，那么高度根本就不会调整，并且图像会被拉伸。 div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> 运行代码段隐藏结果展开摘要是什么原因造成的？我添加了此CodePen来演示我的意思。

156 html css flexbox

9

相对位置还是绝对位置？

position: relative和position: absoluteCSS 和有什么不一样？以及什么时候应该使用？

155 css

12

IE的CSS“指针事件”属性替代

我有一个下拉导航菜单，其中某些标题在单击时不应导航到其他页面（单击时这些标题会打开一个下拉菜单），而其他标题应在导航中（这些都没有下拉菜单并直接导航）。类型已经href定义给他们为了解决这个问题，我为标题的前一种类型添加了以下CSS pointer-events: none; 并且它工作正常。但是由于IE不支持此属性，因此我正在寻找一些解决方法。令人讨厌的是，我没有访问权限和特权来完全更改HTML和JavaScript代码。有任何想法吗？

155 html css internet-explorer browser cross-browser

16

使用-webkit-transform时固定的位置不起作用

我正在使用-webkit-transform（和-moz-transform / -o-transform）来旋转div。还添加了固定位置，以便div与用户一起滚动。在Firefox中工作正常，但在基于Webkit的浏览器中却坏了。使用-webkit-transform后，固定的位置不再起作用！那怎么可能？

155 html css positioning rotation

12

如果将css文件放入<head>或<body>有什么区别？

通常，将css文件放入其中<head></head>，如果我将其放入里面<body></body>，会有什么不同？

155 html css

9

CSS：动画与过渡

因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将制作一个漂亮的动画。然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单：可以通过以下过渡来实现此效果： .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ 或者，通过类似这样的动画： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …

155 css css-transitions css-animations

2

将鼠标悬停在父元素上时设置子元素样式

当父元素悬停时如何更改子元素的样式。如果可能的话，我希望使用CSS解决方案。有没有可能通过：hover CSS选择器解决方案。实际上，当面板上悬停时，我需要更改面板内选项栏的颜色。希望支持所有主流浏览器。

155 css css-selectors

14

CSS：将背景色设置为窗口宽度的50％

试图在“分成两部分”的页面上获得背景；相对两侧的两种颜色（似乎是通过background-color在body标签上设置默认值，然后将另一种颜色应用到div可拉伸整个窗口宽度的来完成的）。我确实提出了一个解决方案，但不幸的是，该background-size属性在IE7 / 8中不起作用，这对于该项目是必不可少的- body { background: #fff; } #wrapper { background: url(1px.png) repeat-y; background-size: 50% auto; width: 100%; } 由于它只是纯色，也许有一种只使用常规background-color属性的方法吗？

155 css background-color

17

Bootstrap 3上的输入宽度

再次更新：我通过选择最佳答案来结束这个问题，以防止人们在未真正理解问题的情况下添加答案。实际上，如果不使用网格或添加额外的CSS，就无法通过内置功能来实现。如果您要处理的help-block元素需要超出简短的输入，但它们是“内置”的，则网格将无法很好地工作。如果这是一个问题，我建议使用额外的CSS类，你可以在BS3讨论找到这里。现在BS4已经发布，可以使用包含的大小调整样式来进行管理，因此不再需要太长的时间了。感谢大家对这个流行的SO问题的良好投入。更新：这个问题仍然悬而未决，因为它是关于BS中的内置功能来管理输入宽度而无需求助于网格（有时必须独立管理）。我已经使用自定义类来管理它，所以这不是基本CSS的方法。该任务在BS 功能讨论列表中，并且尚未解决。原始问题：有人想出一种在BS 3上管理输入宽度的方法吗？我目前正在使用一些自定义类来添加该功能，但是我可能错过了一些未记录的选项。当前的文档说使用.col-lg-x，但是显然不起作用，因为它只能应用于容器div，这会导致各种布局/浮动问题。这是一个小提琴。奇怪的是，在小提琴上，我什至无法调整表单组的大小。 http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

154 css twitter-bootstrap twitter-bootstrap-3

5

CSS中textarea的行和cols属性

我想通过CSS 设置textarea的rows和cols属性。如何在CSS中执行此操作？

154 css styling

14

如何使用JavaScript添加CSS？

如何strong { color: red }使用JavaScript 添加CSS规则（例如）？

154 javascript css

5

您将如何使两个<div>重叠？

我需要两个div看起来像这样： | | ---| LOGO |------------------------ | |_______________| LINKS | | CONTENT | 使它们整齐重叠的最巧妙/最优雅的方法是什么？徽标将具有固定的高度和宽度，并将接触页面的顶部边缘。

154 css html overlap

Questions tagged «css»