Question

我正在尝试使用边框添加剖面分隔符，如图所示。如何做到这一点的任何帮助是非常值得注意的。我不知道是否有任何物化组件可用于相同或不同？

图片演示：

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

Answer 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

Answer 2

请尝试这个：

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

DEMO

IE9＆amp; 10不支持outline-offset属性，但支持很好：http://caniuse.com/#search=outline

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

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

在物化中添加边框标题的边框

2 个答案: