如何绘制可缩放矩形Ruby on Rails

Question

我正在学习Ruby on Rails来创建网站，并且正在寻找一种方法（最好是最常规的方法）来创建白色矩形，该矩形将仅覆盖文本的背面（以便于阅读）。

我以前对Java，C和python等语言有很好的了解，但是我完全不熟悉RoR，HTML，CSS。

我只是简单地完成了以下博客教程，并添加了背景知识。 http://guides.rubyonrails.org/getting_started.html因此，我没有任何可共享的相关代码，仅是基本内容。

我还希望获得更多关于如何更好地控制要绘制的图形的提示（如何使拐角稍微变圆，如何使矩形大小略大于文本大小等）。

Answer 1

感觉就像是要像使用Adobe Illustrator一样绘制海报。

对于WEB设计，您不应该这样做。 将您的网页主要看作是挤压并适应您的内容的容器的集合。

创建将覆盖文本背面的白色矩形

这只是容器的背景。 但是，如果您真的想要只覆盖字母的东西，可以尝试类似

HTML：

<span class="white-shadow">Your text</span>

的CSS

.white-shadow{
  background: white;
}

使角稍圆

这是一个CSS属性，称为

.your_class{
  border-radius: 2px 2px 0 0; // Round corners of 2px radius for top left/right corners
}

使矩形大小略大于文本大小

您实际上想在容器中添加一些填充

.container{
  padding: 5px 10px 5px 10px;
}

如果您对这些都不了解，我强烈建议您阅读HTML / CSS教程。

Answer 2

我看到我参加这个聚会迟到了几分钟，但以防万一这有帮助：

<!DOCTYPE html>
<html>
<head>
<title>SO30947882 Test</title>
<style>
body { /* The entire page's <body> element */
  background-color: gray;
}

* { /* Every element */
  color: black;
}

.my-text { /* Elements with this class property */
  background-color: white;
  padding: 2px;
  line-height: 1em;
  margin: 0 1px;
  border-radius: 2px;
}
</style>
</head>

<body>
<p>Hard to read this.</p>
<p class="my-text">Easier to read this, in a block.</p>
<p>
  <label>Dark text.</label> <label class="my-text">Better text, inline.</label><br/>
  <label>M<span class="my-text">ixe</span>d T<span class="my-text">ex</span>t.</label>
</p>
</body>
</html>

这是一些真正的基本CSS样式定义的东西。 CSS选择器（如此处的body和.my-text ）非常强大，因为它们自然地结合在一起。

造型愉快。

如何绘制可缩放矩形Ruby on Rails

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-06-19 22:08:31

解决方案2
1 2015-06-19 22:27:40

如何绘制可缩放矩形Ruby on Rails

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-06-19 22:08:31

解决方案2 1 2015-06-19 22:27:40

解决方案1
1 已采纳 2015-06-19 22:08:31

解决方案2
1 2015-06-19 22:27:40