Question

我一直在学习HTML，CSS和Web开发方面的知识。我在这个网站上为朋友工作，我正在为网站使用HTML5，CSS3和Bootstrap 4。我有一个在photoshop中设计的模型，我正在尝试找出重建其中一部分的最佳方法。这是部分：

rounded-outline

所以我不确定最好的方法，这个标题略微圆润。我知道如何做一个圆形边框（使用border-radius），我只是不确定添加此标题的最佳方法。这是作为SVG更好地完成还是我可以用CSS和HTML完成它？

Answer 1

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

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

我已经在下面快速模拟了你想要的东西。

＆＃13;

.img{
width:70px;
height:70px;
background-color:blue;
float:left
}

fieldset{
border:1px solid black;
border-radius:5px;
}

＆＃13;

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

＆＃13;

Answer 2

根据您提供给我们的信息，我可以给您一些提示 - 请查看<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 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您还可以使用标题和flex来绘制顶部边框的两位：

＆＃13;

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

＆＃13;

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

＆＃13;

使用您自己的文字和图片内容的布局样式，超出主题，这里是演示和object-fit的好奇心，如果需要剪辑图片。

如何使用CSS

4 个答案: