当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS border-end-start-radius属性用法及代码示例


CSS中的border-end-start-radius属性用于在block-start边界处指定逻辑border-radius。可通过元素的writing-mode,方向和text-orientation进行调整。

用法:

border-end-start-radius:length | percentage;

属性值:

  • length:此属性将边框半径保持为特定单位。
  • percentage:此属性保存与父元素相比的百分比值。
  • 以下示例说明了CSS中的border-end-start-radius属性:

    范例1:



    <!DOCTYPE html> 
    <html> 
        
    <head> 
        <title>CSS | border-end-start-radius Property</title> 
        <style> 
            h1 { 
                color:green; 
            } 
                
            div { 
                background-color:purple; 
                width:250px; 
                height:50px; 
            } 
            .one { 
                background-color:yellow; 
                border-end-start-radius:10px; 
            } 
        </style> 
    </head> 
        
    <body> 
        <center> 
            <h1>Geeksforgeeks</h1> 
            <b>CSS | border-end-start-radius Property</b> 
            <br><br> 
            <div> 
                <p class="one">A Computer Science Portal</p> 
            </div> 
        </center> 
    </body> 
        
    </html>

    Output:

    范例2:

    <!DOCTYPE html> 
    <html> 
        
    <head> 
        <title>CSS | border-end-start-radius Property</title> 
        <style> 
            h1 { 
                color:green; 
            } 
                
            div { 
                background-color:purple; 
                width:250px; 
                height:50px; 
            } 
            .one { 
                background-color:yellow; 
                border-end-start-radius:50%; 
            } 
        </style> 
    </head> 
        
    <body> 
        <center> 
            <h1>Geeksforgeeks</h1> 
            <b>CSS | border-end-start-radius Property</b> 
            <br><br> 
            <div> 
                <p class="one">A Computer Science Portal</p> 
            </div> 
        </center> 
    </body> 
        
    </html>

    Output:

    支持的浏览器:下面列出了border-end-start-radius属性支持的浏览器:

    • Firefox



相关用法


注:本文由纯净天空筛选整理自skyridetim大神的英文原创作品 CSS | border-end-start-radius Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。