Question

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

look at the border around the number 12 in this calendar

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将背景附加：url（“ Image Src”）到自定义类，然后运行JavaScript代码检查日期然后将其附加到您的日历设计中。您需要使用CSS来匹配日历日期的位置和大小。

<html>
<?php
foreach ($_POST['id'] as $val){
    if(isset($_POST['married'][$val])){
        $_POST['married'][$val]="Y";
    }else{
        $_POST['married'][$val]="N";
    }
}
?>
<form method="post" action="/index.php"  enctype="multipart/form-data">
    <input type="hidden" name="id[1]" value="1">
    <input type='text' name='firstName[1]' value='John'>
    <input type='checkbox' name="married[1]" value="1" <?=($_POST['married'][1]=="Y")?" checked ":"";?>>
    <br/>
    <input type="hidden" name="id[2]" value="2">
    <input type='text' name='firstName[2]' value='Linda'>
    <input type='checkbox' name="married[2]" value="1" <?=($_POST['married'][2]=="Y")?" checked ":"";?>>
    <br/>
    <input type='hidden' name='id[3]' value='3'>
    <input type='text' name='firstName[3]' value='Mercedes'>
    <input type='checkbox' name="married[3]" value="1" <?=($_POST['married'][3]=="Y")?" checked ":"";?>>
    <br/>
    <input type='submit' name='submit' value='update'>
</form>

<pre><?php
print_r($_POST);
?></pre>
</html>

Array
(
    [id] => Array
        (
            [1] => 1
            [2] => 2
            [3] => 3
        )

    [firstName] => Array
        (
            [1] => John
            [2] => Linda
            [3] => Mercedes
        )

    [married] => Array
        (
            [1] => Y
            [2] => N
            [3] => N
        )

    [submit] => update
)

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

是否可以在由文字或文字组成的盒子周围做边框？

2 个答案: