CSS 3 원 각 속성 border-radius 와-webkit-border-radius 사용

CSS 3 원 각 속성 border-radius

CSS 3 에 border-radius 테두리 반경 속성,즉 여러분 이 자주 사용 하 는 원 각 효과 가 추가 되 었 습 니 다.이 때문에 원 각 을 만 드 는 것 은 더 이상 번 거 롭 지 않 을 것 입 니 다.사용 하 는 대상 에 border-radius 속성 을 추가 하면 됩 니 다.그림 포 지 셔 닝 이나 불필요 한 코드 를 사용 하지 않 아 도 됩 니 다.그러나 이 병목 을 사용 하 는 것 도 분명 하 다.효 과 는 CSS 3 를 지원 하 는 현대 브 라 우 저 를 표시 해 야 하기 때문에 일부 오래된 버 전 브 라 우 저 에 서 는 IE8 및 이하 브 라 우 저 를 표시 할 수 없다.

CSS 3 원 각 속성 border-radius 사용 방법:

동시에 네 개의 원 각 을 설정 하려 면 하나의 값 만 제시 하면 됩 니 다.border-radius:10px;

또한 각 원 각(시계 방향)을 따로 설정 할 수 있 습 니 다.border-radius:10px 5px 15px 20px;

원 각 만 설정 하면 별도의 CSS 설정 을 쓸 수 있 습 니 다.

border-top-left-radius: 10px;

border-top-right-radius: 5px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 20px;

왼쪽 위 오른쪽 다음 값,오른쪽 위 왼쪽 다음 값:border-radius:10px 5px;

CSS 3 원 각 속성 border-radius 사용 주의:

CSS 3 일부 속성 은 일부 이전 버 전의 브 라 우 저 에서 대응 하 는 설정 이 다 를 때 도 있 습 니 다.예 를 들 어 일부 속성 은 Firefox 에-moz-,Safari 와 Google Chrome 을 추가 해 야 합 니 다.-webkit-,Opera 는-o-,Internet Explorer 9 에-ms 를 추가 해 야 합 니 다.그러나 이 문제 들 은 CSS 3 가 추천 기준 을 발표 함 에 따라 CSS 3 의 원생 속성 을 지원 하기 위해 새 버 전에 서 수정 되 었 다.

이 오래된 버 전의 브 라 우 저의 탐색 을 고려 하기 위해 서,우 리 는 이러한 개인 속성 을 함께 추가 할 수 있다.border-radius 는 맨 뒤에 두 어야 합 니 다.그렇지 않 으 면 효력 을 잃 을 수 있 습 니 다.다음 과 같 습 니 다(border-radius 속성 Opera 와 IE 는 설정 하지 않 아 도 됩 니 다).

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

또한,Firefox 이전 버 전의 border-radius 단일 원 각 속성 이름 도 다 릅 니 다.각각:

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomleft: 15px;

-moz-border-radius-bottomright: 20px;

마지막 으로 한 가지 더 알려 드릴 것 은 border-radius 속성 을 설정 하 는 것 입 니 다.모든 원 각 은 같은 값 을 사용 하 는 것 이 좋 습 니 다.각각 설정 하면 브 라 우 저 에 렌 더 링 효 과 는 미세한 차이 가 있 을 수 있 습 니 다.

<!--html5   -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3    </title>
<style>
	.font-label{
		 font-weight: bold;
	}
	
	.input-text{
		 border: 1px solid #C3CED9;
         border-radius: 5px 5px 5px 5px;/**   -   -   -   */
	}
	.btn-login{
		cursor: pointer;
		display: inline-block;
		position: relative;
		border-radius: 2px;
		font-weight: lighter;
		width:88px;
		padding-top: 0px 2px ;
		margin-bottom:  0px 2px;
		-moz-border-radius: 50px;/**       */
		-webkit-border-radius: 50px;/**    ；  ，       */
		-o-border-radius: 50px;/**  opera   */
		background-color:#03F;  
		margin:0 0 0 10px;
		/***     **/
		background:-webkit-linear-gradient(top,#03F,#9dccdc);
		background: -moz-linear-gradient(top,#03F,#9dccdc);
		background:-o-linear-gradient(top,#03F,#9dccdc);
		background:linear-gradient(top,#03F,#9dccdc);
	}
	
</style>
</head>

<body>
	
    <div align="center">
	    <span class="font-label">   :</span>
        <input type="text" placeholder="      " class="input-text"/>
        <br/>
         <span class="font-label"> &nbsp;&nbsp; :</span>
   	    
        <input type="text" placeholder="     "  class="input-text"/>
                <br/>
        <input type="reset"  class="btn-login" value="  " />
    	<input type="button"  class="btn-login" value="  " /> 
    
    </div>

</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS 3 원 각 속성 border-radius 와-webkit-border-radius 사용

좋은 웹페이지 즐겨찾기