CSS 实现好看的边框
生活随笔
收集整理的這篇文章主要介紹了
CSS 实现好看的边框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
設計給這樣的稿子不是折騰人嘛...哎，沒辦法，作為一個負責任的打工仔，我是不會簡單粗暴的直接切圖的。嗯。能用CSS畫邊框，就不用圖片。
<style>
*{ /*實際開發中，別這樣偷懶哦*/
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 320px;
height: 100px;
border-bottom: 2px solid #4c4c4c;
border-top: 3px solid #00b9b7;
display: flex;
align-items: center;
margin: 20px auto;
justify-content: space-between;
}
.box div{
}
span{
display: block;
}
.left_top{
flex: 1.5;
border-left: 2px solid #00b9b7;
height: 66px;
margin-bottom: 1px;
}
.left_bottom{
flex: 1;
border-left: 2px solid #4c4c4c;
height: 33px;
}
.txt{
width: 292px;
}
.right_top{
flex: 1;
border-left: 2px solid #00b9b7;
height: 33px;
margin-bottom: 1px;
}
.right_bottom{
flex: 1.5;
border-left: 2px solid #4c4c4c;
height: 66px;
}
</style>
</head>
<body>
<div class="box">
<div class="box_left">
<span class="left_top"></span>
<span class="left_bottom"></span>
</div>
<div class="txt">隨便一段文字</div>
<div class="box_right">
<span class="right_top"></span>
<span class="right_bottom"></span>
</div>
</div>
</body>
總結
以上是生活随笔為你收集整理的CSS 实现好看的边框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle查看和替换含不可见字符(空白
- 下一篇： 汉印N41驱动官网