Question

由于某些原因，圆角不在圆角矩形的顶部出现，而是在对象的底部。

任何代码段都很棒。

<font size="4" style="font-family:Arial" rwr="1"><style> * { font-family: "arial" }</style> <style> body { margin: 0px; } </style> </font><h1 class="small" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-sizing: border-box; color: rgb(0, 0, 0); font-family: inherit; font-size: 22px; font-style: normal; font-variant: normal; font-weight: 600; letter-spacing: normal; line-height: 1.1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; padding-top: 15px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp;&nbsp;</h1><div class="container"><div class="box1"><b></b><br></div></div><div class="container" style="background-color: rgb(255, 255, 255); border-bottom-color: rgb(0, 0, 0); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: rgb(0, 0, 0); display: block; font-family: &amp;quot;Helvetica&amp;quot;; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
<div class="box1" style="background-attachment: scroll; background-clip: border-box; background-color: white; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><b style="font-family: &amp;quot;Helvetica&amp;quot;; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">-</b></div>
<div class="box2" style="border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; font-family: &amp;quot;Helvetica&amp;quot;; font-size: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">-</div>
</div><span style='display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: "Helvetica"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'> </span><span style='display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: "Helvetica"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'> </span><script type="text/javascript">             </script>

Answer 1

将此添加到您的CSS：

.box1 {
  border-radius: 5px 5px 0 0;
}

<font size="4" style="font-family:Arial" rwr="1">
  <style>
    * {
      font-family: "arial"
    }
  </style>
  <style>
    body {
      margin: 0px;
    }
  </style>
</font>
<h1 class="small" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-sizing: border-box; color: rgb(0, 0, 0); font-family: inherit; font-size: 22px; font-style: normal; font-variant: normal; font-weight: 600; letter-spacing: normal; line-height: 1.1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; padding-top: 15px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp;&nbsp;</h1>
<div class="container">
  <div class="box1"><b></b><br></div>
</div>
<div class="container" style="background-color: rgb(255, 255, 255); border-bottom-color: rgb(0, 0, 0); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: rgb(0, 0, 0); display: block; font-family: &amp;quot;Helvetica&amp;quot;; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
  <div class="box1" style="background-attachment: scroll; background-clip: border-box; background-color: white; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><b style="font-family: &amp;quot;Helvetica&amp;quot;; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">-</b></div>
  <div class="box2" style="border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; font-family: &amp;quot;Helvetica&amp;quot;; font-size: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">-</div>
</div><span style='display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: "Helvetica"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'> </span>
<span
  style='display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: "Helvetica"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'>
  </span>
  <script type="text/javascript">
  </script>

<?php

// process input in reverse order
$input = array_reverse([
    ['id' => 1, 'message' => 'A', 'parent' => null],
    ['id' => 2, 'message' => 'B', 'parent' => 1],
    ['id' => 3, 'message' => 'C', 'parent' => 2],
    ['id' => 4, 'message' => 'D', 'parent' => null]
]);

// use 'id' as actual key for the entry, saves a lot of hassle
array_walk($input, function($entry) use (&$output) {
    $output[$entry['id']] = $entry;
}); 

array_walk($output, function (&$entry, $id) use (&$output) {
    $parent = $entry['parent'];
    unset($entry['parent']);
    // if entry belongs into a parent, then move it there
    if (array_key_exists($parent, $output)) {
        $output[$parent]['children'][] = $entry;
        unset($output[$id]);
    }
});

print_r($output);

Answer 2

从父<div class="box1">元素中删除background-color:white。边框在那里但不可见。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Click Events</title>

</head>

<body>
    <font size="4" style="font-family:Arial" rwr="1">
        <style>
            * {
                font-family: "arial"
            }
        </style>
        <style>
            body {
                margin: 0px;
            }
        </style>
    </font>
    <h1 class="small"
        style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-sizing: border-box; color: rgb(0, 0, 0); font-family: inherit; font-size: 22px; font-style: normal; font-variant: normal; font-weight: 600; letter-spacing: normal; line-height: 1.1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; padding-top: 15px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
        &nbsp;&nbsp;</h1>
    <div class="container">
        <div class="box1"><b></b><br></div>
    </div>
    <div class="container"
        style="background-color: rgb(255, 255, 255); border-bottom-color: rgb(0, 0, 0); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: rgb(0, 0, 0); display: block; font-family: &amp;quot;Helvetica&amp;quot;; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
        <div class="box1"
            style="background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 30px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
            <b
                style="font-family: &amp;quot;Helvetica&amp;quot;; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">-</b>
        </div>
        <div class="box2"
            style="border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; font-family: &amp;quot;Helvetica&amp;quot;; font-size: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
            -</div>
    </div><span
        style='display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: "Helvetica"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'>
    </span><span
        style='display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: "Helvetica"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'>
    </span>
    <script type="text/javascript">             </script>
</body>

</html>

角不在顶部出现

2 个答案: