css中长方形怎么做

CSS是前端开发中必不可少的重要技术，其中长方形的设计也是非常常见的。今天我们就来一起学习一下如何在CSS中实现长方形。

.rectangle {
  width: 100px; 
  height: 50px;
  background-color: #ccc;
  border: 2px solid #000;
}

上面的代码就是一个简单的长方形CSS样式，其中width属性表示长方形的宽度，height属性表示长方形的高度，background-color属性表示长方形的背景颜色，border属性表示长方形的边框样式。

如果我们想让长方形更加美观，可以给长方形加上圆角、阴影、渐变等效果：

.rectangle {
  width: 200px; 
  height: 100px;
  background-color: #f2f2f2;
  border-radius: 10px;
  Box-shadow: 2px 2px 5px #999;
  background: linear-gradient(to right,#666,#999);
}

上面的代码中，我们将border-radius属性设置为10px，这样可以让长方形的四个角变得圆润。同时，我们也加入了Box-shadow属性来增加长方形的立体感，并使用了background属性来添加渐变颜色效果。

通过这些基本的CSS技巧，我们就能轻松地实现一个美观的长方形。同时，CSS还有很多其它的技巧和属性可以用来实现更多的效果，如动画、过渡等。