在物化中添加带有边框标题的边框答案

【问题标题】：Adding borders with border title in materialize在物化中添加带有边框标题的边框
【发布时间】：2015-12-17 18:09:33
【问题描述】：

我正在尝试使用边框添加部分分隔符，如图所示。对于如何做到这一点的任何帮助都是非常可观的。我不知道是否有任何物化组件已经可用？

图片演示：

<body>
    <main>
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <nav>
              <div class="nav-wrapper light-blue lighten-1">
                <ul id="nav-mobile" class="full side-nav">

                    <li><a href="#">John Daglas</a>
                      <ul class="collection">
                        <li class="collection-item avatar">
                          <img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
                          <span class="title">Title</span>
                          <p>First Line <br>
                             Second Line
                          </p>
                        </li>
                      </ul>
                    </li>
                <li><a href="#">Follower analysis</a></li>
                <li><a href="#">Tweet analysis</a></li>
                <li><a href="#">Retweet analysis</a></li>
                <li><a href="#">Tweet analysis</a></li>
                </ul>

                <!-- Include this line below -->
                <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
                <!-- End -->

              </div>
        </nav>
<div class="row scrollspy grey lighten-4">
    <div class="container">
        <div class="row">
                <div class="col s2 m2">
                    <div class="card-panel green accent-4">
                      <span class="white-text">Tweets
                      </span>
                    </div>
                </div>
                <div class="col s2 m2 ">
                    <div class="card-panel deep-orange accent-2">
                         <i class="material-icons">repeat</i>
                      <span class="white-text">Retweet
                      </span>
                    </div>
                </div>
                <div class="col s2 m2">
                    <div class="card-panel green accent-4">
                      <span class="white-text"> Favourite
                      </span>
                    </div>
                </div>
                <div class="col s2 m2 ">
                    <div class="card-panel deep-orange accent-2">
                      <span class="white-text"> Followers
                      </span>
                    </div>
                </div>
                <div class="col s2 m2">
                    <div class="card-panel green accent-4">
                      <span class="white-text"> Sentiment
                      </span>
                    </div>
                </div>
                <div class="col s2 m2 ">
                    <div class="card-panel deep-orange accent-2">
                      <span class="white-text"> Social score
                      </span>
                    </div>
                </div>
        </div>
        <div class="row">
                <div class="col s6 m6">
                    <div class="card-panel teal">
                      <span class="white-text">Sentiment analysis graph for tweets
                      </span>
                    </div>
                </div>
                <div class="col s6 m6">
                    <div class="card-panel light-blue accent-4">
                      <span class="white-text">Sentiment analysis donuts graph for all hastags
                      </span>
                    </div>
                </div>
        </div>

        <div class="row">
                <div class="col s12 m12">
                    <div class="card-panel teal">
                      <span class="white-text">Tags analysis.
                      </span>
                    </div>
                </div>
        </div>

    </div>
</div>
    </main>
    <footer class="page-footer">
        <div class="footer-copyright">
            <div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>

            </div>
        </div>
    </footer>
</body>

【问题讨论】：

请先生试试这个答案

标签： css html material-design

【解决方案1】：

请试试这个：

.row
{
  border:5px solid #42a5f5;  
   margin-top:10px; 
}

DEMO

您可以使用以下 HTML：

<div>
    <h1><span>Div title</span></h1>
</div>

使用以下 CSS：

div{
    border: 1px solid #000;
    width: 200px;
    height: 200px;
}

div h1{
    text-align: center;
    margin-top: -10px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
}

div h1 span{
    background-color: white;
}

DEMO

【讨论】：

@irvin：非常感谢，如果您能提供更多帮助以在边框和内边框中添加标题，我将不胜感激。
如果你喜欢我的答案请点击正确答案sir@cyclic
@irvin: 再次感谢，但我不能像border:5px light-blue lighten-1那样添加`materialize color`
请看这个演示 sir@cyclic
你等一下，sir@cyclic

【解决方案2】：

请试试这个：

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

DEMO

IE9&10不支持outline-offset属性，其他支持好：http://caniuse.com/#search=outline

不需要知道图像尺寸的替代解决方案：

http://jsfiddle.net/ivinraj/2nj1qn3h/1/

【讨论】：