如何使用CSS在边框内实现带有标题的圆形边框[关闭]

Question

总的来说，我还在学习很多关于 HTML 和 CSS 以及 Web 开发的知识。我正在为一个朋友在这个网站上工作，我正在为这个网站使用 HTML5、CSS3 和 Bootstrap 4。我有一个在 Photoshop 中设计的模型，我目前正在尝试找出重新创建其中一部分的最佳方法。这是部分：

所以我不确定最好的方法是用一个稍微圆角的边框与标题原样。我知道如何做一个圆形边框（使用边框半径），我只是不确定添加这个标题的最佳方法。这是作为 SVG 做得更好还是我可以用 CSS 和 HTML 来完成？

Answer 1

根据你提供给我们的信息，我可以给你一个提示——看看<fieldset>tag。您在此处显示的模型部分可以这样完成：

fieldset {
    border-radius: .5em;
    padding: 1em;
    border: 1px #ddd solid;
}
fieldset > p, fieldset > h1 {
    margin: 0px 0px 0px 111px;
}
fieldset h1 {
    font-size: 18px;
}
fieldset > p + p {
    margin-top: 1em;
}

  <fieldset>
   <legend>de Finibus Bonorum et Malorum</legend>
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4UXkL7-MovU2Y1cXlUhg9uZECINIqU8aXjNur9Xm12N93qYBA" align="left">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="https://www.lipsum.com/" target=_blank">more</a></p>
  </fieldset>

其他选项包括 positioning 和 transform（翻译），您最初有一些正常的标记，然后只是提升标题。

Answer 2

你也可以使用title和flex来绘制上边框的两位：

img{
position:absolute;
left:20px;
top:20px;
bottom:20px;
width:15%;
height:calc(100% - 40px);
object-fit:cover;
}

div{
box-sizing:border-box;
position:relative;
margin-top:2em;
border:3px solid gray;
border-top:none;
border-radius:5px;
}
div p {
margin:0.5em;
padding-left:calc(15% + 40px);
padding-bottom:20px;
}
h1 {
display:flex;transform:translatey(-0.7em);
margin:0;
}
h1:before,
h1:after
{
box-sizing:border-box;
content:'';
height:0.5em;
margin-top:auto;
border-top:3px solid gray;
}
h1:before {margin-right:0.5em;
padding-left:1em;}
h1:after {margin-left:0.5em;
flex:1;}

<div>

<h1>Up This Week</h1>
<img src="http://lorempixel.com/150/220/nature"/>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.</p>

</div>

对文本和图像内容使用您自己的布局样式，它超出主题，这里是为了演示和object-fit 的好奇心，如果需要可以剪辑图像。

Answer 3

如前所述，带图例的 Fieldset 是最直接的例子

fieldset {
 width:700px;
  height:300px;
  border:2px solid #ccc;
  position:relative;
   /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 8px; 
  /* Firefox 1-3.6 */
  -moz-border-radius: 8px; 
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 8px; 
}

legend {
 font-size:1.4rem;
  margin-left:5px;
}

fieldset img {
  max-width:200px;
  max-height:300px;
}

fieldset h1.header {
color:#AE8193;
  font-size:2.0rem;
  margin-bottom:10px;
}

fieldset .text {
  float:right;
  width:70%;
}

fieldset .text a.readmore {
  color:#AE8193;
  text-decoration:underline;
  font-size:1.0pt;
  font-size:1.0rem;
}

.clearfix {
  clear:both;
  height:15px;
}

<fieldset>
<legend>Up This Week</legend>

 <img src="http://www.loraccosmetics.com/storeimages/Images/2014-Summer/LORAC-Alter-Ego-Group-medium.jpg" />
  <div class="text">
    <h1 class="header">Title Text</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="clearfix"></div>
    <a href="#" class="readmore">Read More</a>

</fieldset>

Answer 4

最简单的方法是使用老式的fieldset，Legend 将显示在边框中。

您可以添加border-radius:5px 以稍微圆角。

我已经为您在下面想要的内容设计了一个非常快速的模型。

.img{
width:70px;
height:70px;
background-color:blue;
float:left
}

fieldset{
border:1px solid black;
border-radius:5px;
}

<fieldset>

<legend>Up This Week</legend>

<div class="img"></div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.

</fieldset>