css中矩形 |css3 标签页

.rectangle {
width: 200px;
height: 100px;
background-color: blue;
border: 2px solid black;
border-radius: 10px;
box-shadow: 2px 2px 5px grey;
}

上述代码定义了一个矩形的类，具体属性如下：

• width：矩形的宽度，设为200px。
• height：矩形的高度，设为100px。
• background-color：矩形的颜色，设为蓝色。
• border：矩形的边框，2px的黑色实线。
• border-radius：矩形的边框圆角，设为10px，使矩形四个角都变为圆角。
• box-shadow：矩形的阴影，2px的灰色阴影。

通过这些属性，大家可以创建出一个简单但具有立体感和美观的矩形。

大家还可以通过CSS3中的变换属性transform来为矩形增加动态效果。

.rectangle:hover {
transform: rotate(10deg);
}

上述代码定义了当鼠标在矩形上悬停时，该矩形顺时针旋转10度。

使用CSS创建和设计矩形是网页设计的重要组成部分。熟练掌握CSS中矩形的属性和变换，可以帮助大家更好地实现网页中的元素效果。