纯css设置正方形四个边角样式
网站首页 文章专栏 纯css设置正方形四个边角样式
纯css设置正方形四个边角样式
编辑时间:2019-05-14 09:37 作者:毛毛小妖 浏览量:153 评论数:3

先看一下效果吧:

接下来写我们的页面

<div>
    <span class="row row1"></span>
    <span class="row row2"></span>
    <span class="col col1"></span>
    <span class="col col2"></span>
</div>

最后写我们的css样式

div {
    position:relative;
    left:50px;
    top:50px;
    margin:10px;
    width:500px;
    height:100px;
    border:1px solid #2577e3;
}

span {
    position:absolute;
    padding:5px;
    border-style: solid;
    border-color: #E3581D;
}

.row1 {
    border-width: 5px 0 0 5px;
    top:-5px;
    left:-5px;
}

.row2 {
    border-width: 5px 5px 0 0;
    top:-5px;
    right:-5px;
}

.col1 {
    border-width: 0 0 5px 5px;
    bottom:-5px;
    left:-5px;
}

.col2 {
    border-width: 0 5px 5px 0;
    bottom:-5px;
    right:-5px;
}

 

推荐文章
来说两句吧
最新评论
  • 游客
    首页的搜索功能是自己开发的么?

    shengyu
    毛毛小妖: @游客 是的呢。利用lucene做的全文检索

    2019-05-13 22:33 回复

  • 游客
    1111111

  • 上一页 1 下一页