如何使边框比div中的背景颜色更暗？

Question

我正在尝试一些css-grid示例，我快速尝试复制俄罗斯方块块here。

让我筋疲力尽的一件事是，有些边框比中间部分更暗，我似乎无法创造那种效果。我知道我可以硬编码颜色值，但我试图以更自动的方式进行。

在.wraper > *内，我尝试了background-color:...，但这似乎没有效果。我在hsla()函数中的值大多是任意的。我猜对了，直到有些事情发生了。

这是我的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

我使用0％作为hsla中的第三个参数取得了一些成功。

在此代码段中，右边框和上边框使用hsla(2, 100%, 0%, ...);，左边框和下边框使用hsla(2, 100%, 100%, ...);：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;