自定义勺子边框样式 - 自适应，自定义&动态边框样式 - 适合高度，自定义边框角落 - 双击 [英] Custom scoop border style - responsive, Custom & dynamic border style - fit in height, Custom border corner - double stroke

问题描述

有什么方法可以在CSS或jQuery中制作自定义的勺子边框样式？

如下图所示：

解决方案

这里有一个小提琴... http://jsfiddle.net/zjw3pg2e/5/
这是否适合您？

  body {
背景：＃D8D8D8; 
} 
 .corner {
 background：white; 
 height：20px; 
 width：20px; 
位置：绝对; 
} 
 #sw {
 left：-2px; 
 bottom：-2px; 
 border-radius：0px 20px 0px 0px; 
 border-top：2px纯白色; 
 border-right：2px纯白色; 
背景：＃D8D8D8; 
} 
 #se {
 right：-2px; 
 bottom：-2px; 
 border-radius：20px 0px 0px 0px; 
 border-top：2px纯白色; 
 border-left：2px纯白色; 
背景：＃D8D8D8; 
} 
 #nw {
 left：-2px; 
 top：-2px; 
 border-radius：0px 0px 20px 0px; 
 border-bottom：2px纯白色; 
 border-right：2px纯白色; 
背景：＃D8D8D8; 
} 
 #ne {
 right：-2px; 
 top：-2px; 
 border-radius：0px 0px 0px 20px; 
 border-bottom：2px纯白色; 
 border-left：2px纯白色; 
背景：＃D8D8D8; 
} 
 
 .box {
 position：relative; 
 height：200px; 
 width：200px; 
 border：实体2px白色; 
背景：＃D8D8D8; 
 border-radius：5px -5px 5px 5px; 
} 
 .box2 {
 position：relative; 
 height：160px; 
 width：160px; 
 overflow：hidden; 
 left：20px; 
 top：20px; 
} 
 .box2：之前{
 content：''; 
位置：绝对; 
剩下：0; 
 margin：-20px; 
 height：40px; 
 width：40px; 
 border-radius：100％; 
背景：＃D8D8D8; 
 box-shadow：160px 0 0＃D8D8D8，
 0 160px 0＃D8D8D8，
 160px 160px 0＃D8D8D8，
 0 0 0 500px white; 
} 
  

HTML：

 < div class =box> 
< div id =neclass =corner>< / div> <！ -  ne，nw，se，sw，是角落 - > 
< div id =nwclass =corner>< / div> <！ - 第一个对象 - > 
< div id =seclass =corner>< / div> 
< div id =swclass =corner>< / div> 
< div class =box2>< / div> <！ -  box2是内部边框对象 - > 
< / div> 
  

请注意，对于包含框 ne ， nw ， se ， sw 是倒转的角落。

对于 box2 ，这很难解释发生了什么。我的建议是利用盒子阴影的颜色以及像素位置来理解盒子阴影是如何给出倒置边框的错觉的。

一旦你掌握了它，很容易改变尺寸，以适应你的喜好。

Is there any way to make custom scoop border style in CSS or jQuery?

Like the image below:

解决方案

Here's a fiddle ...http://jsfiddle.net/zjw3pg2e/5/ Does this work for you?

body {
    background: #D8D8D8;
}
.corner {
    background:white;
    height:20px;
    width:20px;    
    position:absolute;
}
#sw {
    left: -2px;
    bottom: -2px;
    border-radius: 0px 20px 0px 0px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    background:#D8D8D8;
}
#se {
    right: -2px;
    bottom: -2px;
    border-radius: 20px 0px 0px 0px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    background:#D8D8D8;
}
#nw {
    left: -2px;
    top: -2px;
    border-radius: 0px 0px 20px 0px;
    border-bottom: 2px solid white;
    border-right: 2px solid white; 
    background:#D8D8D8;
}
#ne {
    right: -2px;
    top: -2px;
    border-radius: 0px 0px 0px 20px;
    border-bottom: 2px solid white; 
    border-left: 2px solid white;
    background:#D8D8D8;
}

.box {
    position:relative;
    height:200px;
    width:200px;
    border: solid 2px white;
    background:#D8D8D8;
    border-radius: 5px -5px 5px 5px;
}
.box2 {
    position:relative;
    height:160px;
    width:160px;
    overflow:hidden;
    left: 20px;
    top: 20px;
}
.box2:before{
    content:'';
    position:absolute;
    left:0;
    margin:-20px;
    height:40px;
    width:40px;
    border-radius:100%;
    background:#D8D8D8;
    box-shadow:160px 0 0 #D8D8D8,
    0 160px 0 #D8D8D8,
    160px 160px 0 #D8D8D8,
    0 0 0 500px white;   
}

HTML:

<div class="box">
    <div id="ne"  class="corner"></div> <!--ne, nw, se, sw, are the corners-->
    <div id="nw" class="corner"></div>  <!--of first object-->
    <div id="se" class="corner"></div>
    <div id="sw" class="corner"></div>
    <div class="box2"></div>  <!--box2 is the inner border object-->
</div>

Note that for the encompassing box, ne, nw, se, sw are the inverted corners.

For box2, It is rather difficult to explain what is going on. My suggestion is to play around with the colours of the box-shadow, as well as the pixel positions, to understand how the box-shadow gives the illusion of an inverted border.

Once you get the hang of it, it's really easy to change the dimensions so that it fits your liking.

这篇关于自定义勺子边框样式 - 自适应，自定义&动态边框样式 - 适合高度，自定义边框角落 - 双击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！