집 >웹 프론트엔드 >HTML 튜토리얼 >border-radius 요소에 둥근 테두리를 추가하는 방법

border-radius 요소에 둥근 테두리를 추가하는 방법

php中世界最好的语言원래의: 2018-01-20 09:35:222258검색

이번에는 테두리 반경 요소에 둥근 테두리를 추가하는 방법과 테두리 반경 요소에 둥근 테두리를 추가하는 노트

에 대해 설명하겠습니다.

border-radius:10px; /* 모든 모서리는 10px의 반경으로 둥글게 됩니다*/

border-radius: 5px 4px 3px 2px; /* 4개의 반경 값은 왼쪽 위 모서리, 오른쪽 위 모서리입니다. 오른쪽 하단 및 왼쪽 하단, 시계 방향 */

border-radius 값이 px 단위만 될 수 있다고 생각하지 마세요. 백분율이나 em도 사용할 수 있지만 아직 호환성이 좋지 않습니다.

단단한 상단 반원:

방법: 높이를 너비의 절반으로 설정하고 왼쪽 상단 모서리와 오른쪽 상단 모서리의 반경만 요소 높이와 일치하도록 설정합니다(그 이상도 괜찮습니다).

div{   
　　height:50px;/*是width的一半*/   
　　width:100px;   
　　background:#9da;   
　　border-radius:50px 50px 0 0;/*半径至少设置为height的值*/   
　　}

채워진 원:

방법: 너비와 높이 값을 일관되도록(즉, 정사각형) 설정하고 둥근 모서리 값 4개를 해당 값의 절반으로 설정합니다.

다음 코드:

div{   
　　height:100px;/*与width设置一致*/  
　　width:100px;   
　　background:#9da;   
　　border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/  
　　}

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>border-radius</www.dztcsd.com/title>  
<style type="text/css">  
div.circle{   
    height:100px;/*与width设置一致*/   
    width:100px;   
    background:#9da;   
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/   
    }   
/*任务部分*/      
div.semi-circle{    
    height:100px;   
    width:50px;   
    background:#9da;   
    border-radius:?;   
    }   
      
</style>  
</head>  
<body>  
<div class="circle">  
</div>  
<br/>  
<!--任务部分-->  
<div class="semi-circle">  
</div>  
  
</body>  
</html>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other

border-radius 요소에 둥근 테두리를 추가하는 방법

관련 기사