当前位置: 首页 > 面试题库 >

仅在一个边界上勾勒轮廓

甘君之
2023-03-14
问题内容

如何将 嵌入边框 应用于HTML元素,但仅在其一侧。到现在为止,我一直在使用图像(GIF /
PNG)执行此操作,然后将其用作背景并拉伸它(repeat-x),并从块的顶部移开一点。最近,我发现了 轮廓
CSS属性,这是伟大的!但是似乎将整个块都圈了起来…是否可以仅使用此边框属性在一个边界上执行此操作?另外,如果没有,您是否有任何CSS技巧可以代替背景图片?(以便稍后可以使用CSS等来个性化轮廓的颜色)。提前致谢!

这是要实现的目标的图像:http :
//exiledesigns.com/stack.jpg


问题答案:

大纲确实适用于整个元素。

现在,我看到了您的图像,这是实现它的方法。

.element {

  padding: 5px 0;

  background: #CCC;

}

.element:before {

  content: "\a0";

  display: block;

  padding: 2px 0;

  line-height: 1px;

  border-top: 1px dashed #000;

}

.element p {

  padding: 0 10px;

}


<div class="element">

  <p>Some content comes here...</p>

</div>

(或查看 外部演示。)

所有尺寸和颜色都只是占位符,您可以对其进行更改以匹配所需的确切结果。

重要说明
:.element必须具有display:block;(div的默认值)才能起作用。如果不是这种情况,请提供完整的代码,以便我详细说明。



 类似资料:
  • 在我的应用程序中,我允许用户设置背景颜色和图像。因此,为了确保所有必要的信息和图标都是可见的,我使用了带有不同颜色阴影的文本。通过在xml中设置阴影属性可以很容易地进行设置。 然而,我找不到在vector drawable上绘制轮廓的方法。我发现了类似的问题,但答案或多或少都是用阴影画出矩形或方形背景。这让我看起来太难看了。我想勾勒出形状的轮廓,而不是用shaddow将背景设置为正方形。

  • 问题内容: 我正在尝试使用CSS创建一个圆, …只有一个div: 并仅使用CSS定义。不允许使用SVG,WebGL,DirectX等。 我尝试绘制一个完整的圆,然后将另一个圆与另一个圆淡化div,它确实起作用,但是我正在寻找一种更优雅的选择。 问题答案: 您可以使用border-top-left-radius和border-top-right- radius属性根据框的高度(和添加的边框)在框上四

  • 我在我的活动中使用了一个倒计时计时器来实现一些倒计时功能。我决定离开CountDownTimer,使用ScheduledThreadPoolExecutor,因为CountDownTimer不能在onTick()中自动取消。 出于某种原因,以下代码中的my只执行一次。我不知道为什么它没有执行多次。函数未被击中。

  • 问题内容: 我正在使用和在CSS中创建一个半透明的圆圈。 在这个圆的周围,我希望有另一个完全透明的边界(例如10个像素),而又想有另一个半透明的边界(10个像素)。 这是我创建圈子的方式: 我需要怎么做才能在现有边界周围创建另一个边界,然后再创建另一个边界? 问题答案: 您可以使用简单的边框并将背景裁剪到,以在填充区域中创建透明部分: 您也可以考虑 您可以轻松缩放到任意数量的边界:

  • 我有一个长方形的小组,里面有一群精灵。精灵在移动(说向上)。当它们到达顶部时,会与边界发生碰撞。我已经建立了一套逻辑,在精灵离开团队时杀死他们。然而,现在的样子,我可以看到精灵离开了团队。我想让它在精灵穿越边界时逐渐消失,直到它消失(并死亡)。 这是一个我想要实现的粗略模型。 我在玩相机,以为我必须修改视口,但它不起作用。达到这种效果的正确方法是什么? 谢谢 编辑:我的相机是这样设置的: 现在它是

  • 问题内容: 他们是否是使特定窗口在Linux上无边界的标准方法?我相信窗口边框是由您的窗口管理器绘制的,所以可能我只需要使用一个特定的窗口管理器(可以找到,我只需要知道哪个窗口管理器即可)…我希望是所有的窗口管理器都可能遵循一些标准,使我能够以编程方式执行此操作… 问题答案: 使用Xlib和old : 这些天NETWM / EWMH提示是首选,但据我所知,所有现代的窗口管理器还支持这一点。