CSS-设置工具提示容器的样式

如何解决CSS-设置工具提示容器的样式

| 我有一个背景图片用作工具提示容器的背景。图像如下所示： 它的用法如下：

.tooltip {
    display:none;
    background:url(images/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}

<div class=\"tooltip\">Tolltip text goes here</div>

但是，所有工具提示都没有相同数量的文本，因此我需要一种基于文本量来增大或减小容器的方法。我应该怎么做？滑动门技术是否可以同时调整水平和垂直大小？怎么样？ 另外，如果我使用滑动门技术，是否可以具有相同的对角线渐变？如果没有，还有其他选择吗？     

解决方法

更新此操作可以使用纯CSS完成。例。 好问题。目前，您的投影看起来是PNG图像的一部分，并且您知道该图像不可调整大小。您可以使用CSS3阴影，以适应容器的大小。问题在于，您只能将这些阴影添加到文本或框（而不是箭头！）中。 我认为您最好的选择是在CSS3的盒子中添加一个阴影，并为箭头添加一个PNG图片，就像这样： 可能需要稍作调整才能使其完全对齐，但允许框根据内容调整大小。

.tooltip {
    display:none;
    padding:40px 30px 10px 30px;
    font-size:11px;
    color:#fff;

    position: relative;
    background: #000;

    /* rounded corners */
    -webkit-border-radius: 2px; 
       -moz-border-radius: 2px; 
            border-radius: 2px;

    /* box shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0,0.3);
       -moz-box-shadow: 0px 0px 10px rgba(0,0.3);
            box-shadow: 0px 0px 10px rgba(0,0.3);

    /* background gradient,see http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(
        linear,left bottom,left top,color-stop(0.08,rgb(0,0)),color-stop(0.57,rgb(48,48,48))
    );
    background-image: -moz-linear-gradient(
        center bottom,0) 8%,48) 57%
    );
}

.tooltip_arrow {
    position: absolute;
    bottom: -37px; /* 37px is the height of the black_arrow.png */
    left: 45%; /* roughly centered... you can decide how to best do this */
}

<div class=\"tooltip\">
    Tolltip text goes here
    <img src=\"images/black_arrow.png\" class=\"tooltip_arrow\" />
</div>

我尚未对此进行测试，但我希望它能为您提供一个良好的开端。     ,尝试CSS箭头：http：//cssarrowplease.com/