标签: outline

有没有人知道更多关于Opera大纲的错误？

看一下这个:

http://jsfiddle.net/BYgMr/

我正在使用最新的Opera,我已经检查了两台具有不同Opera版本的不同机器,它们都呈现如下:

http://img156.imageshack.us/img156/3209/divs.png

那是什么？在任何FF/Safari/Chrome中,轮廓都在灰色区域以下,但在Opera中它仍然在上面(即使div父级在下方!).

谷歌搜索只提供"Opera 9.5+ CSS bug:渲染轮廓绝对定位"链接,但它不想打开.

任何临时修复？或者也许我是盲人并在某处犯了一个可怕的错误？

所以我有一个由n个点组成的任意线(见图1所示的例子)

我想围绕这条线绘制一个轮廓(见图2),所以我需要计算周围多边形的点.

我开始在线上进行扩张,但这不起作用 - 见图3

有关如何做到这一点的任何建议？

我怀疑计算每个线段的法线是否用于翻译下面的新线和在当前位置上方的新线,然后将每个新线延伸到无穷大并将点定义为交叉点？

编辑:我关注的是移动网站.

让我说对点.无论我做什么,概述:无; 不会使用Ipod Touch/Iphone从输入表单元素中删除任何默认突出显示/发光.

我看到的每个地方,人们都说使用:

input:focus {
outline:none;
}

要么

input {
outline:none;
}

....而这将消除辉光......好吧,它没有.

另一个主要问题是没有默认的亮点.我创建了一个没有样式和表单输入的空白​​页面,通过IOS mobile查看页面,输入元素上没有发光/轮廓......它只是空白.

唯一有效的方法是使用-webkit-appearance:none; - 这只是允许我在输入元素上设置一个box-shadow.如果我没有使用-webkit-appearance:none; - 然后盒子阴影将无法正常显示.

然而,当在桌面浏览器上查看时,即使没有webkit,框阴影也能正常工作.

所以我的问题是:为什么概述:无; 对输入元素没有用处？我看到有些人说他们只使用锚标签,但也有人说他们在输入元素上工作.谁在这？因为到目前为止,无论我做什么,概述:无; 对输入元素毫无价值.

这是一个JSfiddle:

http://jsfiddle.net/QQGnj/4/show/

在iOS移动设备上查看此页面,开始时没有"发光"或默认样式.每个人都看到默认的发光行为需要大纲:无; 工作(它没有)？这让我很生气!

当光标在图像上方时,我想创建一个底部轮廓边框,我不知道如何做到这一点.我想使用这种内部边框,因为我不希望传统的边框底部存在布局问题.

这是我当前的代码,到处都是轮廓边距:

.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}

a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}

我知道还有其他这样的问题,但我已经尝试了他们所建议的一切无济于事.这是一个与Firefox中的范围输入元素中删除虚线轮廓不同的问题,因为我在问这个流氓轮廓是什么原因 - 上一个问题回答了如何获得如下所示的彩色轮廓.

这个问题(从Firefox中的范围输入元素中删除虚线轮廓)提到了firefox错误 - https://bugzilla.mozilla.org/show_bug.cgi?id=932410但它已被标记为已解决,但我仍然有这个问题.

输入CSS是:

input[type=range]:-moz-focusring {
    outline: 1px solid orange;
}
input[type=range]:focus {
    outline: 1px solid green;
}

input[type=range] {
    -moz-appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
    outline: 1px solid red;
}
input[type=range]:focus::-moz-range-track {
    outline: 1px solid blue;
}
input[type='range']::-moz-focus-inner {
    outline: 1px solid red;
}

我的浏览器计算出的CSS是:

浏览器中呈现的输入如下所示:

从我的测试看起来:-moz-focusring和它:focus是相同的属性 - 绿色轮廓,覆盖橙色.

-moz-appearance: none;在元素上什么都不做::-moz-focus-inner.

您可以看到range-thumb有一个红色边框,range-track有一个蓝色边框,但仍有虚线轮廓.我在上面的SO问题中尝试了从第二个答案中"隐藏在边框后面"的技巧,但随后白色边框位于范围的顶部 - 拇指就像图中的虚线轮廓一样.轮廓偏移也不会在左侧或右侧延伸,因此末端的虚线仍然显示.

我有一个透明背景的图像,我想用5px边框勾勒出来.在Photoshop中,我可以用它来实现这一点.

我尝试过使用borderImage但不会概述企鹅.

$image = new Imagick();
$image->readImage('tux.png');

$image->borderImage(new ImagickPixel('red'), 5, 5); // no outline

这是图像.

这就是我想要实现的目标.

所以我有四个盒子,向左浮动,每个盒子的页面宽度为50%.我希望他们有一个轮廓1px solid gray,我想用6px围绕角落.我知道我可以使用border:1px solid gray;,border-radius:6px;但问题是边框增加了元素的宽度.而且由于盒子的宽度为50%,并且它们向左浮动,我无法为它们添加边框.那么是否可以使轮廓角变圆？

编辑:CSS-only解决方案是最好的,因为我需要支持除IE6之外的每个浏览器.

我还在开发一个图像处理项目,该项目利用HLSL着色器添加Photoshop-esque过滤器,如投影,斜角等.现在我正在寻找一种在HLSL中实现外部发光效果的方法.

我目前正在尝试以下想法:

1)缩放当前纹理以创建光晕(参数:glowSize,用于设置轮廓的大小)

2)模糊水平

3)模糊垂直,改变模糊颜色以发光颜色并在顶部添加原始纹理

我正在使用以下多次传递HLSL着色器来渲染光晕:

float4 PS_Scale(VS_OUTPUT IN) : COLOR0
{
    float2 tex = IN.texture0;
    float2 scaleCenter = float2(0.5f, 0.5f);
    float2 scaleTex = (tex - scaleCenter) * glowSize + scaleCenter;
    return tex2D(foreground, scaleTex);
}

float4 PS_GlowH(VS_OUTPUT IN) : COLOR0
{
    float2 Tex = IN.texture0;

    float4 sum = float4(0.0, 0.0, 0.0, 0.0);
    sum += tex2D(secondForeground, float2(Tex.x - 4.0*blur, Tex.y))*0.05;
    sum += tex2D(secondForeground, float2(Tex.x - 3.0*blur, Tex.y))*0.09;
    sum += tex2D(secondForeground, float2(Tex.x - 2.0*blur, Tex.y))*0.12;
    sum += tex2D(secondForeground, float2(Tex.x - blur, Tex.y))*0.15; …

任何人都知道如何将twitter引导徽章(或标签)从实体更改为轮廓？

我有一个汉堡菜单按钮,可通过TAB选择.当我点击它并打开菜单时,汉堡有这个蓝色轮廓,以表明它是聚焦的.我不想删除那个蓝色轮廓,因为它有助于视障人士和标签选择它也很棒,但只有当有人通过鼠标点击蓝色轮廓时才有一种聪明的方法来删除蓝色轮廓.只是美学......

感谢您的回答.

干杯