css-（border-image）

用图片做边框效果

• border-image-source:url();

• border-image-slice:数字； 还有个fill属性用来填充

• border-image-repeat:round | stretch repeat ;

• border-image-width:xx px;
  

  round.jpg
  
  #mydiv{
  width: 200px;
  height: 100px;
  border: 4px solid red; /这个照样写/
  border-image-source: url(border.png);
  border-image-slice:9; /这个数字多少效果就会有不一样的/
  border-image-repeat:round;
  border-image-width: 5px;

    }
  

stretch.jpg

      #mybtn{
    width: 200px;
    height: 100px;
    /*border: 5px solid red;*/ /*这个可以没有的*/
    border-image-source:url(button1.png);
    border-image-slice: 23; /*好像这个越大切的越细，不能有px*/
    border-image-repeat:stretch;
    border-image-width: 20px;
}

button.jpg

 #mybtn2{
    width: 400px;
    height: 100px;
    border-image-source: url(button2.png);
    border-image-slice: 23 fill; /*填充整个div*/
    border-image-repeat: round;
    /*border-image-width: 20px;*/ /*这个没有用*/
    text-align: center;
    font-family: "微软雅黑";
    font-size: 47px;
    color:white;
    line-height:100px;
    text-shadow:6px 6px 6px #000;  /*都忘记了还有text-shadow，就记得box-shadow*/
}
#mybtn2:hover{
    text-shadow: -6px -6px 6px #666;
}