border-radius 属性 | 开创者教程

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border-Radius 演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            background-color: #f5f5f5;
        }
        
        .demo-box {
            width: 300px;
            height: 120px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .title {
            width: 100%;
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="title">Border-Radius 演示</div>
    
    
    <div class="demo-box" style="border-radius: 15px;">
        border-radius: 15px;<br>所有四个角都是15px圆角
    </div>
    
    
    <div class="demo-box" style="border-radius: 15px 30px;">
        border-radius: 15px 30px;<br>左上和右下15px，右上和左下30px
    </div>
    
    
    <div class="demo-box" style="border-radius: 15px 30px 45px;">
        border-radius: 15px 30px 45px;<br>左上15px，右上和左下30px，右下45px
    </div>
    
    
    <div class="demo-box" style="border-radius: 15px 30px 45px 60px;">
        border-radius: 15px 30px 45px 60px;<br>左上15px，右上30px，右下45px，左下60px
    </div>
    
    
    <div class="demo-box" style="border-radius: 150px / 60px;">
        border-radius: 150px / 60px;<br>水平半径150px，垂直半径60px
    </div>
    
    
    <div class="demo-box" style="width: 150px; height: 150px; border-radius: 50%;">
        border-radius: 50%;<br>正方形元素创建圆形
    </div>
    
    
    <div class="demo-box" style="width: 150px; height: 100px; border-radius: 50%;">
        border-radius: 50%;<br>长方形元素创建椭圆形
    </div>
    
    
    <div class="demo-box" style="border-radius: 40px 80px / 60px;">
        border-radius: 40px 80px / 60px;<br>水平半径40px和80px，垂直半径60px
    </div>
</body>
</html>