制作好看又非常簡單CSS樣式的顔色塊

首先，在html建立一個div塊

html檔案如下

<div class="color-lump"></div>
           

我現在想要的是一個高80px，寬80px，背景色是綠色（#33cd5f）的顔色塊，于是

CSS檔案内容如下

.color-lump{
    width: 80px;
    height: 80px;
    background-color: #33cd5f;
}
           

效果圖：

那現在，我改變主意了

我要一個高300px，寬300px，同時距離左邊有40px，juli顔色塊是從粉色（#ff00ca）到棕黃色（ccd9400）的漸變

CSS檔案内容如下：

.color-lump{
    width: 300px;
    height: 300px;
    margin-top:80px;
    margin-left: 40px;
    background: -webkit-gradient(linear,left top,left bottom,from(#ff00ca),to(#cd9400));
}
           

我看了看，覺得這個色塊不夠好看

于是我讓它的邊緣稍微有點弧度，就弄個20px

還是覺得不夠好看，于是給它加了10px的藍色邊框

.color-lump{
    margin-top: 60px;
    width: 300px;
    height: 300px;
    margin-left: 40px;
    border: 10px solid rgb(0,162, 233);
    border-radius: 20px;
    background: -webkit-gradient(linear,left top,left bottom,from(#ff00ca),to(#cd9400));
}
           

效果如下：

在這個學習中，我發現了，當邊框寬度越來越大，内部的弧度将會越來越小，最後成為一個正方形，這裡我給定的邊框寬度是30px

.color-lump{
    margin-top: 60px;
    width: 300px;
    height: 300px;
    margin-left: 40px;
    border: 30px solid rgb(<span style="font-family: Arial, Helvetica, sans-serif;">0,162, 233</span><span style="font-family: Arial, Helvetica, sans-serif;">);</span>
    border-radius: 20px;
    background: -webkit-gradient(linear,left top,left bottom,from(#ff00ca),to(#cd9400));
}
           

效果如下：