CSS 图片边框的处理

一、边框高度固定，内容可滚动

这种情况下，直接将整个边框切下来作为背景图,里面的内容设置固定高度，溢出部分设置overflow: scroll/auto

源码如下：
html:

 
"rule-wrapper">
       
"rule-content">
           转眼已经入冬了，时间太过迅驰，我和我的南方小城一样，总是慢吞吞地跟不上时节的节奏。
           不打电话，不用朋友圈，除了周末去市区给学生上绘画课，这一年，我住在幽僻的市郊，
           过着写字画画，一...
       
   

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;
}