Question

我需要设置样式框，请参阅随附的屏幕截图。

screenshot of box

身高和体重可能不同。它可能是150 x 200 px但也是600 x 150 px。
Internet Explorer 8是必须的。由于这个可悲的没有CSS3 可以使用技术。 IE 7将不受支持。
阴影是底部和右边。但如果有人知道四面阴影的解决方案我也有兴趣。
不希望使用基于JavaScript的解决方案，因为我对各种库没有很好的经验。
清洁构造而不是在各种div中包装内容。看到 “code mockoup”。
箭头的位置可能不同。它可以在顶部，左侧等。

<div class="dropdown">
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
<div class="arrow"></div>
<div class="dropdownContent">   

</div>                                          
</div>

作为良好的起点，我找到zara.com solution（展开，例如发货）。他们使用such image

enter image description here

Con是包装器的背景颜色无法在CSS中更改，因为它是图像的一部分。但它并不那么重要。

Answer 1

如果使用CSS3 PIE，则可以使用圆角，阴影和其他CSS3功能。某些功能有点cpu密集模拟，但它从版本6开始为您提供或多或少的CSS3兼容IE。

Answer 2

老帖子，但值得一提的是以下纯CSS3解决方案。给出以下Less CSS：

// Tooltip Variables

@wcui_tt_radius: 6px;
@wcui_tt_arrow_size: 6px;
@wcui_tt_background: rgba(0,0,0,0.8);
@wcui_tt_foreground: white;
@wcui_tt_padding: 6px 10px;
@wcui_tt_font: 13px "Helvetica Neue", Arial, Helvetica, sans-serif;
@wcui_tt_z: 100;
@wcui_tt_max_width: 200px;


// Mixins

.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}


#arrow {
    .top(@arrowWidth: 5px, @color: black) {
        top: 0;
        left: 50%;
        margin-left: -@arrowWidth;

        border-left: @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
        border-bottom: @arrowWidth solid @color;
    }
    .bottom(@arrowWidth: 5px, @color: black) {
        bottom: 0;
        left: 50%;
        margin-left: -@arrowWidth;

        border-left: @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
        border-top: @arrowWidth solid @color;
    }
    .left(@arrowWidth: 5px, @color: black) {
        top: 50%;
        left: 0;
        margin-top: -@arrowWidth;

        border-top: @arrowWidth solid transparent;
        border-bottom: @arrowWidth solid transparent;
        border-right: @arrowWidth solid @color;
    }
    .right(@arrowWidth: 5px, @color: black) {
        top: 50%;
        right: 0;
        margin-top: -@arrowWidth;

        border-top: @arrowWidth solid transparent;
        border-bottom: @arrowWidth solid transparent;
        border-left: @arrowWidth solid @color;
    }
}


// Tooltip Styles
.tooltip {
    font: @wcui_tt_font;
    .opacity(0);
    .transition(opacity 0.15 ease);
    z-index: @wcui_tt_z;
    position: absolute;
    overflow: visible;
    display: block;
    visibility: visible;

    .on { .opacity(100); }

    .content {
        position: relative;
        overflow: hidden;
        background-color: @wcui_tt_background;
        color: @wcui_tt_foreground;
        padding: @wcui_tt_padding;
        .border-radius(@wcui_tt_radius);
        max-width: @wcui_tt_max_width;
    }

    .arrow {
        position: absolute;
        width: 0;
        height: 0;
        margin: 0 auto;
    }

    &.top {
        padding-top: @wcui_tt_arrow_size;
        .arrow { #arrow > .top(@wcui_tt_arrow_size, @wcui_tt_background); }
    }
    &.bottom {
        padding-bottom: @wcui_tt_arrow_size;
        .arrow { #arrow > .bottom(@wcui_tt_arrow_size, @wcui_tt_background); }
    }
    &.left {
        padding-left: @wcui_tt_arrow_size;
        .arrow { #arrow > .left(@wcui_tt_arrow_size, @wcui_tt_background); }
    }
    &.right {
        padding-right: @wcui_tt_arrow_size;
        .arrow { #arrow > .right(@wcui_tt_arrow_size, @wcui_tt_background); }
    }
}

看起来很长，但事实并非如此。 mixins在整个Less CSS代码中重复使用。 HTML标记非常简单：

<div class="tooltip left">
    <div class="arrow"></div>
    <div class="content">
        <p>This is a sample large tooltip.</p>
    </div>
</div>

剩下的就是定位它，并在你希望它出现时使用类似jQuery的东西以某种方式添加“on”类。结果如下：

Tooltip Sample http://f.cl.ly/items/2u2Z1H011p2R1h1D0B3N/tips.png

圆角的角落语音框与箭头和dropshadow。基于图像

2 个答案: