css 只留四个边角的样式
Posted 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 只留四个边角的样式的主要内容，如果未能解决你的问题，请参考以下文章
CSS样式中visited，hover，active , focus这四个分别表示什么意思？
使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式