是否可以在由文字或文字组成的盒子周围做边框? [英] Is it possible to make a border around a box that is made of words or text?

问题描述

我在photoshop上制作了一些东西，以便人们可以理解我在脑海中所描绘的事物.

I made something on photoshop so people can understand what I'm picturing in my head.

看看此日历中数字12的边框

推荐答案

这里是使用SVG作为背景并具有一定旋转度和缩放度的想法.您可以轻松地更改文本，字体，颜色等，但随后需要调整不同的值，例如填充，背景大小，背景位置等

Here is an idea using SVG as background with some rotation and scale. You can easily change the text, font, colors, etc. but you need then to adjust different values like padding, background-size, background-position, etc

.box {
  padding: 10px;
  margin:10px;
  font-size: 50px;
  display: inline-block;
  background-image: 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>"), 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:scale(-1,-1);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>");
  background-repeat:repeat-x;
  background-size:45px 10px;
  background-position:top left,bottom left;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  left: 0;
  background-image: 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:rotate(90deg);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>"), 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:rotate(90deg) scale(-1,-1);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>");
  background-repeat:repeat-y;
  background-size:45px 45px;
  background-position:calc(100% + 18px) 0,-18px 0;
}

<div class="box">
  16
</div>
<div class="box">
  31
</div>

<div class="box">
  16/07/2018
</div>

<div class="box">
  16 Jul 2018
</div>

这篇关于是否可以在由文字或文字组成的盒子周围做边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！