标签: outline

关于执行以下操作的做法存在一些争议:

a, input, textarea, button {
    outline: none;
}

可访问性问题是一个常见问题.

我不打算完全删除此功能(如上面的代码所示); 但是,这个功能通过在不受欢迎的区域添加非预期的边框(嗯,轮廓？)而极大地混淆了我的原始设计.

主要问题是这些轮廓实际上遵循元素周围的矩形区域,而不是其轮廓(即它忽略边界半径等).

例:

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}

<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

我所知道的唯一解决方案是运行上面的代码并使用我自己的系统.

采用这种方法时最佳做法是什么？

我知道关于SO的类似问题有很多答案,但似乎没有一个对我有用.问题是在Firefox上只有Linux(Windows很好),无线电输入在聚焦时会有橙色轮廓.当输入放在元素内时,这个大纲是错误的overflow: hidden:

<div style="width: 100px; margin: 30px auto; overflow: hidden;">
    <label><input type="radio" name="some_radio">radio 1</label>
    <br>
    <label><input type="radio" name="some_radio">radio 2</label>
</div>

那么我怎么能摆脱那个大纲,任何人都可以帮忙吗？我试过了input::-moz-focus-inner,::-moz-focusring但没有任何效果.

这是jsFiddle,但只有在使用Linux时才能看到问题.

在Chrome和IE9上,我指定的CSS大纲完全符合我的要求,并作为我正在构造的元素的第二个边框.

在Firefox上,大纲向外扩展,以便它包含我生成的:: after伪元素以及主元素.

这是一个错误,还是预期？它有什么好的/简单/干净的解决方法吗？如果可能的话,我宁愿避免添加额外的标记.

我试图安装taglist(但我无法安装ctags),但我意识到它不支持css,还有其他方法或插件来执行这项工作吗？

PS:我检查了ctags的安装文件,但是我找不到任何看起来像安装手册的步骤.

它只是说:

Installation Notes
==================

For non-Unix platforms, simple makefiles are provided:

    descrip.mms   For VMS using either DEC C or VAX C
    mk_bc3.mak    For MSDOS using Borland C/C++ 3.x
    mk_bc5.mak    For Win32 using Borland C++ 5.5
    mk_djg.mak    For MSDOS using DJGPP Gnu GCC (better to follow Unix install)
    mk_manx.mak   For Amiga using Aztec/Manx C 5.0
    mk_mingw.mak  For Win32 using MinGW
    mk_mpw.mak    For Macintosh using MPW
    mk_mvc.mak    For Win32 using Microsoft Visual C++
    mk_os2.mak    For OS/2 using GCC (EMX)
    mk_qdos.mak …

我试图用谷歌搜索它，但是否有任何示例着色器效果可用于生成轮廓的 FormattedText。使用BuildGeometry()可以得到轮廓，但是性能很差！

PS：由于我是新手并且仍在学习，如果有人能建议它是否甚至可能会有所帮助。

我正在使用range.group方法Microsoft.Office.Interop.Excel.dll ,它可以将列或行组合为Excel文档中的大纲级别; 但是问题是如何"+"在左侧设置符号,而不是根据最后的列或行在右侧设置默认位置.

使用什么方法来控制方向以及如何使用此方法.如果这是一个例子,那将是最好的.

我在 Mac 上看到 Chrome 的这种行为（尚未在 Windows 上测试过）。此外，由于这项工作是针对 chrome 扩展程序的，我可以得到一个仅与 Chrome 相关的解决方案（现在不必跨浏览器工作）。

问题：浏览器似乎在元素周围绘制不同的“轮廓”，具体取决于轮廓样式是否为“自动”。

当围绕作为“img”父级的标签绘制轮廓时，如下所示：

 <a href="image.com">
   <img class="profile_photo_img" src="imageSrc.jpeg" width="50" alt="Steve Jobs" height="50">
 </a>

• 如果轮廓样式为“自动”，则轮廓绘制正确。即 Chrome 会考虑内部图像的尺寸来渲染标签周围的轮廓。（请参阅屏幕截图中的绿色轮廓）。

• 如果轮廓样式是“实心”或任何其他常规样式，则轮廓仅围绕外部标签绘制，而不管内部孩子的尺寸。

我正在应用的 CSS 如下所示：

.class-name:focus {
   outline: 4px auto #068065 !important;
   outline-offset: 2px !important;
 }

1) 有没有办法解决这个问题或解决这个问题，即让浏览器也为轮廓样式的“实体”正确绘制轮廓？

2）我应该在哪里阅读更多关于这个的信息？也许是一些非正式的文档或对相关代码的访问？

我在互联网上搜索过，也许我遗漏了一些正确的关键字，但我没有找到类似的东西。我只找到了不完全是图形的折线（或只是线）。我想生成一个图形轮廓（半径r），如图所示。有什么已经可用的吗？我想避免重新发明轮子可以这么说。

如果有人可以暗示我某些事情或至少是一些基本原则如何去做，那将是很棒的。否则我当然会自己“发明”一个。

最好在 C# 中。

更新：我需要计算轮廓多边形，而不仅仅是在视觉上绘制它。绿点表示生成的多边形。“内部”孔也被完全忽略。只有一个轮廓多边形就足够了。

更新 2：更好的图片来展示一些更极端的情况。此外，图的边缘永远不会重叠，因此无需对此进行调整。

更新 3：图片再次更新以反映斜面连接。

我有一个非常简单的剪切着色器，用于在 3D 空间中显示图标（见下文）。

我想“以编程方式”添加遵循 alpha 轮廓的轮廓/笔划，并具有用户定义的厚度和颜色。

（左）：我目前拥有的 - 一个 alpha 剪切着色器（右）：我想要的 - 围绕剪切的轮廓 请注意：这些不是精灵，它们是 3D 平面

请问我该怎么做呢？

Shader "Custom/Transparent/CutoutEmissive" {
Properties {
    _Color ("Main Color", Color) = (1,1,1,1)
    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
    _Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
    _EmissiveAmount ("Emissive Amount", Range(0,1)) = 0.5
    _Outline ("Outline Thickness", Range(0,10)) = 0.0
}

SubShader {
    Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}
    LOD 200

CGPROGRAM
#pragma surface surf Lambert alphatest:_Cutoff

sampler2D _MainTex;
fixed4 _Color;
float _EmissiveAmount;
float _Outline;
struct Input …

由于某些元素位于幻灯片内，我使用带有负偏移量的轮廓而不是边框​​。

然而，子元素覆盖了轮廓，但我想要它们上面的边框。我用它来构建内容。

http://jsfiddle.net/z22kw2zq/1/

.parent {
 position:relative; outline: green 3px solid;
  outline-offset:0px;
background-color:pink;
pading:5px;
overflow:hidden;
}
.child {position:relative; top:26px; background-color:yellow;
display:inline;
}