css-（border-image）

叁歲伎倆 2022-06-02 08:27 178阅读 0赞

> 用图片做边框效果

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

css-（border-image）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读