月眸


纯css设置正方形四个边角样式

毛毛小妖 2019-05-09 248浏览 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;
}

 

最后修改:2019-05-09 16:38:18 © 著作权归作者所有
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

上一篇

发表评论

说点什么吧~

评论列表

匿名用户 2019-05-13 22:14:11
首页的搜索功能是自己开发的么?
回复
匿名用户 2019-05-09 19:26:33
1111111
回复