투케이2K

30. (html/css/javascript/jquery) border radius 사용해 div 테두리 둥글게 만들기, 및 원형으로 만들기 본문

FrontEnd

30. (html/css/javascript/jquery) border radius 사용해 div 테두리 둥글게 만들기, 및 원형으로 만들기

투케이2K 2021. 6. 9. 17:57
반응형

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

	#btn_container {			
		width : 30%;
		height : 10%;
		margin : 0 auto;
		padding : 0;
		border : none;
		background-color : #026f2a; 
					
		/* 컨테이너 배치 정렬 실시 */
		float : top;
		position : relative; 
		top : 15%;
		left : 0%;
			
		/* div 테두리 영역 둥글게 설정 : 각 모서리 모두 동일 적용 : 원 동그라미 모양 설정 */
		border-radius : 50%;  

		/* div 테두리 영역 둥글게 설정 : 각 모서리 모두 동일 적용 : 일반 설정 */
		border-radius : 20px;
			
		/* div 테두리 영역 둥글게 설정 : 각 모서리 개별 적용 : 일반 설정 */
		border-top-left-radius : 20px;
		border-top-right-radius : 20px;
		border-bottom-left-radius : 20px;
		border-bottom-right-radius : 20px;
	}

/* =========================== */

​

/* =========================== */

[결과 출력]

​

​

/* =========================== */

​

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

32. (html/css/javascript/jquery) font face 사용해 내부 저장된 파일 폰트 적용 실시 및 font family 속성 설명  (0) 2021.06.11
31. (html/css/javascript/jquery) 커스텀 팝업창 활성 및 전체 배경색 투명도 조절 실시 - display , z index , position fixed  (0) 2021.06.10
29. (html/css/javascript/jquery) 텍스트 text 길이 초과 시 생략 처리 - table layout, white space, text overflow  (0) 2021.06.09
28. (html/css/javascript/jquery) 동적으로 div 레이아웃 생성 및 스타일 속성 지정 실시  (0) 2021.06.09
27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시  (0) 2021.06.06
'FrontEnd' Related Articles more
Comments