css不规则圆角矩形
CSS提供了border-radius
属性来创建圆角矩形。如果你想创建一个不规则的圆角矩形,可以为border-radius
属性指定不同的值,来实现每个角的不同圆角半径。
以下是一个简单的例子,展示了如何使用CSS创建一个不规则的圆角矩形:
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
width: 200px;
height: 100px;
background-color: #4CAF50;
/* 设置四个角的圆角半径 */
border-radius: 10px 30px 50px 70px; /* 顺序为左上角、右上角、右下角、左下角 */
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
在这个例子中,.rectangle
类定义了一个200px宽、100px高的矩形,并设置了不同的圆角半径,分别对应左上角、右上角、右下角、左下角。
评论已关闭