有可能在一个由单词或文本组成的方框周围设置边框吗

Question

我在photoshop上做了一些东西，这样人们就可以理解我脑海中的画面。

看看这个日历中数字12周围的边界

Answer 1

这里有一个使用SVG作为背景并进行一些旋转和缩放的想法。你可以很容易地更改文本、字体、颜色等，但你需要调整不同的值，如填充、背景大小、背景位置等

.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>

Answer 2

这样？你可以简单地使用一个png的Photoshop图像，它有一个透明的背景，但根据你想要的设计，使用css将background:url("image-Src"(附加到一个自定义类，然后运行JavaScript代码来检查日期，然后将其附加到你的日历设计中。您需要使用css来匹配日历日期的位置和大小。

.date {
font-size:100px;
padding-left:10px;
}
.active-date {
background: url("https://image.ibb.co/ipQRid/date_bk.png");
background-repeat: no-repeat;
background-size:contain;
}

<div class="date active-date">12</date>