一、边框高度固定,内容可滚动
这种情况下,直接将整个边框切下来作为背景图,里面的内容设置固定高度,溢出部分设置overflow: scroll/auto
源码如下:
html:
<div class="rule-wrapper">
<div class="rule-content">
转眼已经入冬了,时间太过迅驰,我和我的南方小城一样,总是慢吞吞地跟不上时节的节奏。
不打电话,不用朋友圈,除了周末去市区给学生上绘画课,这一年,我住在幽僻的市郊,
过着写字画画,一...
</div>
</div>
CSS:
.rule-wrapper{
width: 614px;
height: 450px;
background: url('images/rcontent-bg.png') no-repeat center;
background-size: 614px 450px;
padding: 120px 100px;
box-sizing: border-box;
}
.rule-content{
height: 200px;
overflow: scroll;
font-size: 25px;
}
二、边框高度不固定,由内容决定
1、使用border-image属性
.wrapper{
position: relative;
width: 300px;
box-sizing: border-box;
border: 10px solid transparent; /*设置边框的宽度*/
border-image: url("../images/border.png") 30 30 repeat;
/*设置图片路径、border-image-width、border-image-repeat*/
}
2、使用before、after伪元素(比较常用)
对于这种上下不一样、中间有重复部分的边框,使用伪元素的方式就比较适合
.wrap {
position: relative;
background: url('../images/deck-middle.png') repeat-y center;/*中间重复的部分平铺*/
background-size: 308px 25px;
}
.wrap:before {
position: absolute;
content: '';
left: 50%;
top: -17px;
margin-left: -154px;
width: 308px;
height: 25px;
background: url('../images/deck-top.png') no-repeat center top;
background-size: 308px 25px;
}
.wrap:after {
position: absolute;
content: '';
left: 50%;
bottom: -25px;
margin-left: -154px;
width: 308px;
height: 26px;
background: url('../images/deck-bottom.png') no-repeat center top;
background-size: 308px 26px;
}