相关疑难解决方法(0)

奇怪的黑色边框:在Firefox中的css箭头之后

为了在我的工具提示中使用纯CSS创建一个箭头,我在Firefox中遇到了一个问题:

在此输入图像描述

我试图在Firefox中找到导致黑色边框的原因而没有成功.

这是一个jsfiddle和一个运行代码片段,演示了这个问题:

.tooltip {
    position:relative;z-index:1;
    display:inline-block;padding-right:10px;
}
.tooltip .info {
    position:absolute;left:100%;top:-7px;
    display:block;padding:7px;border:1px solid #cccccc;
    background:#fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
}
.tooltip .info img {float:left;}
.tooltip:after {
    content: '';
    position:absolute;top:0;left:100%;
    display:block;
    width:0;
    height:0;
    margin-left:-13px;
    border:0 solid transparent;
    border-right-color:#cccccc;
    color:#ccc;
}
.tooltip .info:after {
    content: '';
    position:absolute;top:7px;left:-12px;z-index:10;
    display:block;
    width:0;
    height:0;
    border:transparent solid 6px;
    border-right-color:#fff;
    color:#ccc;
}

Run Code Online (Sandbox Code Playgroud)

<a class="tooltip">Test for tooltip<span class="info">My …

Run Code Online (Sandbox Code Playgroud)

html css firefox css3 pseudo-element

neb*_*irl

2015 06-15

9
推荐指数

1
解决办法

1596
查看次数

如何在CSS中创建带边框的倾斜标签？

我正在尝试创建有角度的标签以位于内容部分之上,并且遇到了这个很好的例子:

HTML:

<div class="tab">
    <div class="arrow"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

body
{
    background-color: #666;    
}
.tab
{
    height: 50px;
    width: 150px;
    border-radius: 10px 10px 0px 0px;
    background-color: #FFF;
    position: relative;
}

.arrow
{
  border-color: transparent transparent #FFF #FFF;
  border-style: solid;
  border-width: 23px 23px 23px 23px;
  height:0;
  width:0;
  position:absolute;
  bottom:0px;
  right:-43px;
}

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/P3P3Z/2/

但是,我想为这个形状设置一个不同的2px边框颜色,不幸的是这个方法不起作用,因为它使用边框来创建形状的右侧.

关于如何修改它的任何想法？

css html5 tabs css3

ali*_*s51

2013 05-30

9
推荐指数

1
解决办法

2万
查看次数