divの背景色よりも境界線が暗くなるようにするにはどうすればよいですか？

Question

私はいくつかのcssグリッドの例を使って自分の道を進んでいます。テトリスブロックを複製するための簡単な試みを行いましたhere。

私をちょっと驚かせていることの1つは、境界線の一部が中間部分よりも暗く、その効果を作り出すように見えないことです。色の値をハードコードすることはできますが、私はより自動化された方法でそれをやろうとしています。

.wraper > *の中には、background-color:...を実行しようとしましたが、それは効果がないようです。それらの内部にある値はほとんど任意です。私はちょうど何かが働くまで推測した。ここで

は私のCSSとHTMLで、codepen：以下

.wraper{ 
    display: grid; 
    /* grid-gap: 10px; */ 
    grid-template-rows: repeat(100px); 
    grid-template-columns: repeat(7, 100px); 
} 

* { 
    box-sizing: border-box; 
    } 
.wraper > * { 
    /* background-color: red; */ 
    min-height: 100px; 
    width: 100px; 
    border-bottom: 10px solid hsla(2, 100%, 100%, 0.15); 
    border-right: 10px solid hsla(2, 100%, 100%, .2); 
    border-top: 10px solid hsla(2, 100%, 100%, .5); 
    border-left: 10px solid hsla(2, 100%, 100%, 0.25); 

    background-color: hsla(2, 100%, 100%, 0.25); 
} 

.b { 
    background-color: blue; 
} 

.r { 
    background-color: red; 
} 

.lb { 
    background-color: lightblue; 
} 

.g { 
    background-color: green; 
} 

.y { 
    background-color: yellow; 
} 

HTML：

<div class="wraper"> 
    <div class="b"></div> 
    <div class="lb"></div> 
    <div class="lb"></div> 
    <div class="y"></div> 
    <div class="y"></div> 
    <div class="y"></div> 
    <div class="y"></div> 


    <div class="b"></div> 
    <div class="lb"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="r"></div> 
    <div class="r"></div>  
    <div class="g"></div> 

    <div class="b"></div> 
    <div class="lb"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="r"></div> 
    <div class="r"></div> 
    <div class="g"></div> 

</div> 

Answer 1

私はhslaで3番目の引数として0％を使用して、いくつかの成功を収めました。このスニペットで

、右、上境界がhsla(2, 100%, 0%, ...);を使用して、左と下の境界線がhsla(2, 100%, 100%, ...);を使用します。

.wraper{ 
 
    display: grid; 
 
    /* grid-gap: 10px; */ 
 
    grid-template-rows: repeat(100px); 
 
    grid-template-columns: repeat(7, 100px); 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    } 
 
.wraper > * { 
 
    /* background-color: red; */ 
 
    min-height: 100px; 
 
    width: 100px; 
 
    border-bottom: 10px solid hsla(2, 100%, 100%, 0.25); 
 
    border-right: 10px solid hsla(2, 100%, 0%, .25); 
 
    border-top: 10px solid hsla(2, 100%, 0%, .15); 
 
    border-left: 10px solid hsla(2, 100%, 100%, 0.5); 
 

 
    background-color: hsla(2, 100%, 100%, 0.25); 
 
} 
 

 
.b { 
 
    background-color: slateblue; 
 
} 
 

 
.r { 
 
    background-color: red; 
 
} 
 

 
.lb { 
 
    background-color: lightblue; 
 
} 
 

 
.g { 
 
    background-color: green; 
 
} 
 

 
.y { 
 
    background-color: yellowgreen; 
 
}

<div class="wraper"> 
 
     <div class="b"></div> 
 
     <div class="lb"></div> 
 
     <div class="lb"></div> 
 
     <div class="y"></div> 
 
     <div class="y"></div> 
 
     <div class="y"></div> 
 
     <div class="y"></div> 
 
    
 
     
 
     <div class="b"></div> 
 
     <div class="lb"></div> 
 
     <div class="b"></div> 
 
     <div class="b"></div> 
 
     <div class="r"></div> 
 
     <div class="r"></div>  
 
     <div class="g"></div> 
 
    
 
     <div class="b"></div> 
 
     <div class="lb"></div> 
 
     <div class="b"></div> 
 
     <div class="b"></div> 
 
     <div class="r"></div> 
 
     <div class="r"></div> 
 
     <div class="g"></div> 
 

 
    </div>