Tidadigi Logo

CSS | stroke-miterlimit Property

Thuộc tính stroke-miterlimit biểu diễn giới hạn tỷ lệ giữa độ dài miter và độ rộng nét vẽ. Nó được dùng để vẽ một miter join. Thuộc tính này dùng khi miter vượt quá độ dày của đường kẻ. Nếu vượt quá giới hạn chỉ định, kiểu 'miter' sẽ chuyển thành 'bevel'. Điều này sẽ cắt điểm nối vuông góc với chỗ nối thay vì một đường nối sắc nét. Cú pháp: 
stroke-miterlimit: number|initial|inherit
Giá trị thuộc tính:
  • number: Nó dùng để định nghĩa giới hạn tỷ lệ. Giá trị phải lớn hơn hoặc bằng 1. Giá trị mặc định là 4. Ví dụ 1: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>
        CSS | stroke-miterlimit property
    </title>
    
    <style>
        rect {
            stroke-linejoin: miter;
            stroke-width: 20px;
            stroke: green;
            fill: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>
        CSS | stroke-miterlimit
    </b>
    
    <p>
        Each angle of the square is of 90 degrees.
        Increasing the miterlimit progressively
        converts the miter joints to bevel ones.
    </p>
    
    <div class="container">
        <svg width="500px" height="200px"
                xmlns="http://www.w3.org/2000/svg"
                version="1.1">
            
            <rect x="50" y="20" width="100"
                height="100" stroke-miterlimit=1 />
            
            <text x="40" y="150">
                stroke-miterlimit: 1
            </text>
            
            <rect x="250" y="20" width="100" 
                height="100" stroke-miterlimit=2 />
            
            <text x="240" y="150">
                stroke-miterlimit: 2
            </text>
        </svg>
    </div>
</body>

</html>
    Đầu ra: css-stroke-miterlimit-property Ví dụ 2: html 
    <!DOCTYPE html>
<html>

<head>
    <title>
        CSS | stroke-miterlimit property
    </title>

    <style>
        polygon {
            stroke-linejoin: miter;
            stroke-width: 8px;
            stroke: green;
            fill: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        CSS | stroke-miterlimit
    </b>

    <p>
        Each of the triangles have two angles
        equal to 24 degrees and one angle 
        equal to 130 degrees. Increasing the
        miterlimit progressively converts the
        miter joints to bevel ones.
    </p>
    
    <div class="container">
        <svg width="500px" height="200px"
                xmlns="http://www.w3.org/2000/svg"
                version="1.1">
            <polygon points="20, 20 150, 20 85, 80"
                    stroke-miterlimit=1 />
            
            <text x="30" y="100">
                stroke-miterlimit: 1
            </text>
            
            <polygon points="170, 20 300, 20 235, 80"
                    stroke-miterlimit=2 />
            
            <text x="180" y="100">
                stroke-miterlimit: 2
            </text>
    
            <polygon points="320, 20 450, 20 385, 80"
                    stroke-miterlimit=3 />
            <text x="330" y="100">
                stroke-miterlimit: 3
            </text>
        </svg>
    </div>
</body>

</html>
    Đầu ra: css-stroke-miterlimit-property
  • initial: Nó dùng để thiết lập thuộc tính về giá trị mặc định.
  • inherit: Nó dùng để thiết lập thuộc tính kế thừa từ phần tử cha.
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ stroke-miterlimit property được liệt kê dưới đây:
  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer 9

Last Updated : 21/07/2025