如何制作三个分组的矩形？

Question

我想制作三个包含文本内容和圆角的矩形分组，但我不太清楚该怎么做？

如有任何代码片段，我们将不胜感激。

<style> * { font-family: "arial" }</style> 
<style>
body {
margin: 0px;
}
</style>
<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;">-</h1><span style="display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; 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><div class="field" 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; border-bottom-color: rgb(255, 255, 255); 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(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; orphans: 2; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">(-) <br></div>

Answer 1

你需要添加border-radius到class.field如下图

.field{border-radius: 10px;}

这是 fiddle：

<style>
  * {
    font-family: "arial"
  }
.field{border-radius: 10px;}
</style>
<style>
  body {
    margin: 0px;
  }
</style>
<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;">-</h1><span style="display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; 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>
<div class="field" 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; border-bottom-color: rgb(0, 0, 0); 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-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; orphans: 2; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">(-) <br></div>

注意：请避免内联样式并尝试使用 css shorthand 属性，例如 padding: 10px 5px 10px 10px; 以获得良好的编码习惯。

清洁版：

body {
  margin: 0px;
}

* {
  font-family: "arial"
}

.field {
  border-radius: 10px;
}

.small {
  color: rgb(0, 0, 0);
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  text-align: left;
  padding: 15px 10px 15px 10px;
  background-color: rgb(229, 229, 229);
}

.abc {
  display: inline !important;
  float: none;
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  text-align: left;
}

.field {
  background-color: rgb(229, 229, 229);
  border: 1px solid #000;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  padding: 10px;
  text-align: left;
}

<h1 class="small">-</h1><span class="abc">
</span>
<div class="field">(-) <br></div>

Answer 2

<style> * { font-family: "arial" }</style> 
<style>
body {
margin: 0px;
}
.field {
  border: 2px solid red !important;
  border-radius:5px;
}
</style>
<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;">-</h1><span style="display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; 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><div class="field" 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; border-bottom-color: rgb(0, 0, 0); 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-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; orphans: 2; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">(-) <br></div>

Answer 3

试试这个

*{
margin:0;
padding:0;
}
.container {
  display: block;
  background-color: rgb(229, 229, 229);
  border: 1px solid #000;
  border-radius: 5px;

}


.box1{
  padding:10px;
  background: red;
  color:white;
  font-family: arial;
  font-size:18px;
 }
.box2 {
  border-top: 1px solid #000;
 padding:10px;
}
 .box3 {
  border-top: 1px solid #000;
  padding:10px;
  background: yellow;
  color: blue;
  font-family: sans-serif;
  font-size:20px;
}

<div class="container">
  <div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
  <div class="box2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="box3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

如何制作三个分组的矩形？

How to make three grouped rectangles?

html

border