css中带颜色的方块

CSS中的带颜色的方块是一种简单却重要的设计元素，它可以用来美化网页、吸引用户的注意力。

.color-box {
    width: 100px;
    height: 100px;
    background-color: #f1c40f;
} 

使用上面的代码，可以创建一个宽和高都为100像素的带有黄色背景颜色的方块。其中，background-color属性用来设置背景颜色。

.color-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border: 1px solid #2980b9;
} 

可以通过添加 border 属性，来为方块添加边框。使用 solid值可以创建实线边框，而 #2980b9 是用来设置边框颜色的。

.color-box {
    width: 100px;
    height: 100px;
    background-color: rgba(231, 76, 60, 0.5);
} 

此外，还可以使用 rgba() 函数来设置背景颜色，其中最后一个参数表示透明度。上面的代码将创建一个颜色为深红色、透明度为 0.5 的方块。

通过这些方法，可以很容易地创建出各种带颜色的方块，为页面添加元素和风格。