使用css设置响应式草绘边框

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经创建了用于在图像上设置草图样式边框的代码。 其中可以看到下面：使用css设置响应式草绘边框

jQuery('.border').click(function(){  
    jQuery('.border').toggleClass('resize');  
});

body {  
    background-color: lightblue;  
}  
.border {  
    width: 200px;  
    margin: 0px auto;  
    position: relative;  
    -webkit-transition: all 2s;  
    /* Safari */  
    transition: all 2s;  
    background-image: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400-sides.png);  
    background-repeat: repeat-y;  
    background-size: 100%;  
    border-radius: 15px;  
    background-position: 0 0;  
    padding: 5px;  
    overflow: hidden;  
}  
.border .padding::before, .border .padding::after {  
    content: '';  
    display: block;  
    position: absolute;  
    left: 0;  
    width: 100%;  
    height: 0;  
    background: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400.png) no-repeat;  
    background-size: 100%;  
    z-index: 50;  
    padding-bottom: 5.4%;  
    pointer-events: none;  
}  
.border .padding::before {  
    top: 0px;  
}  
.border .padding::after {  
    bottom: 0px;  
    background-position: 0px 100%;  
}  
.border.resize {  
    width: 500px;  
}  
img {  
    width: 100%;  
    height: auto;  
    position: relative;  
    border-radius: 10px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div class="border">  
    <div class="padding">  
     <img src="https://nosycrow.com/wp-content/uploads/imported-books/Spectre-Collectors-Too-Ghoul-For-School-312087-3-593x911.jpg" alt="">  
    </div>  
</div>

但问题是，这个盒子是不准确的响应。为了测试它，我添加了一个小的jquery脚本，因此当您单击图像时，图像大小会调整。而且你可以看到图像更大时，边框看起来没有正确对齐。

我知道在我的解决方案中，为了解决这个问题，我必须添加媒体查询，以便在媒体查询中调整顶部和边框上的边界。但是，有没有更好的解决方案呢？

回答：

我用不同的解决方案修复了它。那种旧派。我使用了3幅图像，水平线，垂直线和角落，并使用它们在不同的div上设置了它们的位置。在这里可以看到

jQuery('.sketchy-box').click(function(){  
    jQuery('.sketchy-box').toggleClass('resize');  
});

.sketchy-box {  
    width: 300px;  
    height: auto;  
    margin: 0px auto;  
    position: relative;  
    -webkit-transition: all 1s;  
    /* Safari */  
    transition: all 1s;  
}  
.sketchy-box .bdt {  
    position: absolute;  
    z-index: 1;  
    left: 10px;  
    top: 0px;  
    width: calc(100% - 20px);  
    height: 5px;  
    background: url("http://aslamdoctor.com/taskapp/[email protected]") left top repeat-x;  
}  
.sketchy-box .bdb {  
    position: absolute;  
    z-index: 1;  
    left: 10px;  
    bottom: 0px;  
    width: calc(100% - 20px);  
    height: 5px;  
    background: url("http://aslamdoctor.com/taskapp/[email protected]") left top repeat-x;  
    transform: rotate(180deg);  
}  
.sketchy-box .bdl {  
    position: absolute;  
    z-index: 1;  
    left: 0px;  
    top: 10px;  
    width: 5px;  
    height: calc(100% - 20px);  
    background: url("http://aslamdoctor.com/taskapp/[email protected]") left top repeat-y;  
    transform: rotate(180deg);  
}  
.sketchy-box .bdr {  
    position: absolute;  
    z-index: 1;  
    right: 0px;  
    top: 10px;  
    width: 5px;  
    height: calc(100% - 20px);  
    background: url("http://aslamdoctor.com/taskapp/[email protected]") left top repeat-y;  
}  
.sketchy-box .corner {  
    position: absolute;  
    z-index: 1;  
    width: 13px;  
    height: 13px;  
    background: url("http://aslamdoctor.com/taskapp/[email protected]") left top no-repeat;  
}  
.sketchy-box .ctl {  
    left: 0px;  
    top: 0px;  
}  
.sketchy-box .ctr {  
    right: 0px;  
    top: 0px;  
    transform: rotate(90deg);  
}  
.sketchy-box .cbl {  
    left: 0px;  
    bottom: 0px;  
    transform: rotate(-90deg);  
}  
.sketchy-box .cbr {  
    right: 0px;  
    bottom: 0px;  
    transform: rotate(180deg);  
}  
.sketchy-box img {  
    width: 100%;  
    height: auto;  
    position: relative;  
    z-index: 0;  
    border-radius: 10px;  
}  
.sketchy-box.resize {  
    width: 1000px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div class="sketchy-box">  
    <div class="bdl"></div>  
    <div class="bdr"></div>  
    <div class="bdt"></div>  
    <div class="bdb"></div>  
    <div class="corner ctl"></div>  
    <div class="corner ctr"></div>  
    <div class="corner cbl"></div>  
    <div class="corner cbr"></div>  
    <img src="https://nosycrow.com/wp-content/uploads/2015/09/BooksAlways_26-27-593x320.jpg" alt="">  
</div>

以上是 使用css设置响应式草绘边框 的全部内容， 来源链接： utcz.com/qa/263243.html

回到顶部