标签: css3

可以说我有一个带有字体真棒图标和一些文字的引导按钮:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

如何使文本垂直居中显示？文本现在与图标的下边缘对齐:http://jsfiddle.net/V7DLm/1/

编辑: 我有一个可能的解决方案:http://jsfiddle.net/CLdeG/1/但它感觉有点hacky - 介绍额外的p标签,使用左拉和显示:表.也许有人可以建议一个更简单的方法

如何创建这样的形状以显示在网页上？

我不想使用图像,因为它们会在缩放时变得模糊

我试过CSS:

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="tear">
</div>

结果真是搞砸了.

然后我尝试使用SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

它确实得到了形状,但底部没有弯曲.

有没有办法创建这个形状,以便它可以在HTML页面中使用？

是否可以使用CSS/CSS3镜像文本？

具体来说,我有这个剪刀char"✂"(✂),我想显示左,而不是右.

有没有办法只在底部放下阴影？我有一个菜单,旁边有两张图片.我不想要一个正确的阴影,因为它与正确的图像重叠.我不喜欢使用图像,所以有没有办法将它放在底部,如:

box-shadow-bottom: 10px #FFF; 或者类似的？

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

我用DIVs 创建一个网站.除非我创建DIV,否则一切正常.我像这样创建它们(例子):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

当我添加padding-left属性时,DIV更改的宽度为220px,我希望它保持在200px.

假设我创建另一个DIV名称anotherdiv完全相同newdiv,并将其放入其中newdiv但newdiv没有填充并且anotherdiv具有padding-left: 20px.我得到同样的东西,newdiv宽度将是220px.

我该如何解决这个问题？

如何使用CSS翻转任何背景图像？可能吗？

currenty我使用这个箭头图像中background-image的liCSS中

开:visited我需要水平翻转此箭头.我可以这样做另一个箭头图像但我只是好奇知道是否可以在CSS中翻转图像:visited

是否可以使用CSS3选择器:first-of-type选择具有给定类名的第一个元素？我的测试没有成功,所以我认为不是吗？

守则(http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

我有一个网站有很多页面和不同的背景图片,我从CSS显示它们:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

但是,我想在一个页面上使用<img>元素显示不同的(全屏)图片,并且我希望它们具有与上述background-image: cover;属性相同的 属性(图像不能从CSS显示,它们必须从HTML文档中显示).

通常我使用:

div.mydiv img {
    width: 100%;
}

要么:

div.mydiv img {
    width: auto;
}

使图片充分和响应.然而,width: 100%当屏幕变得太窄时,图片会缩小太多(),并在底部屏幕中显示正文的背景颜色.另一种方法,width: auto;只使图像完整大小,不响应屏幕大小.

有没有办法以同样的方式显示图像background-size: cover？

我正在尝试打印一个页面.在那个页面中,我给了一张表背景颜色.当我在chrome中查看打印预览时,它没有采用背景颜色属性...

所以我尝试了这个属性:

-webkit-print-color-adjust: exact; 

但仍然没有显示颜色.

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td> …

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{ …