css3图片边框

 

。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
    .imgBox{
        width:300px;
        height:300px;
        /* 虽然使用图片边框 但是border属性必须的有 虽然会被覆盖 */
        border:30px solid transparent;
        /* border-image-source: none;//图片边框的初始值
        border-image-slice:100%;
        border-image-width: 1;
        border-image-outset: 0;
        border-image-repeat: stretch; */
        /* 用在边框的图片的路径。 */
        border-image-source: url("./images/1.jpg");
        /* 图片边框向内偏移。 */
        /*将图片边框 平铺到div元素*/
        border-image-slice:30 fill;
        /* 图片边框的宽度。 */
        border-image-width: 1;
        /* 边框图像区域超出边框的量。 */
        border-image-outset: 0;
        /* 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)*/
        border-image-repeat: stretch;

        /* 简写形式 */
        /* border-image: image-source image-height image-width image-repeat */
        /* border-image: url("./images/1.jpg") 30 30 fill; */
    }
</style>
</head>
<body>
    
<div class="imgBox">

</div>



    
</body>
</html>

 

 

 

 

。

 

posted @ 2020-09-06 10:55  古墩古墩  Views(126)  Comments(0)  Edit  收藏  举报