css 只留四个边角的样式

Posted 2021-01-11 blhw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 只留四个边角的样式相关的知识，希望对你有一定的参考价值。

css：

<style rel="stylesheet/scss" lang="scss" scoped>
div {
 position:relative;
 left:50px;
 top:50px;
 margin:10px;
 width:500px;
 height:100px;
 border:1px solid #E3581D;
}

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;
}
</style>
 
 
html: 
　　<div>
 <span class="row row1"></span>
 <span class="row row2"></span>
 <span class="col col2"></span>
 <span class="col col1"></span>
 </div>
 
 
效果图：
 

以上是关于css 只留四个边角的样式的主要内容，如果未能解决你的问题，请参考以下文章