CSS3에서 테두리 속성을 사용하는 방법

오늘은 CSS3의 테두리 속성 사용법을 공유하겠습니다. 이 속성에는 특정 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다.

CSS3의 테두리에는 테두리 디자인을 더욱 아름답게 만들기 위해 많은 새로운 기능이 추가되었습니다. 다음으로 이 글에서는 여러 테두리의 사용법을 자세히 소개하겠습니다.

css3 borders

( 1) 테두리 그림자

box-shadow: h-shadow v-shadow 흐림 확산 색상 삽입

h-shadow, v-shadow: 가로 및 세로 방향의 그림자 위치, 음수 값 쓰기 가능

blur: 흐림 거리( 값이 클수록 흐릿해집니다.)

spread: 그림자의 크기

color: 그림자의 색상

inset: 외부 그림자(outset)를 내부 그림자로 변경

처음 두 값은 필수이며, 마지막 4개는 값은 선택 사항입니다.

div{
			width:100px;
			height: 100px;
			background-color: pink;
			box-shadow:10px 10px 10px gray;
		}

(2) 테두리 이미지

border-image:src 슬라이스 너비 outset 반복

src: 이미지의 경로입니다.

슬라이스: 그림 테두리가 안쪽으로 오프셋됩니다.

너비: 그림 테두리의 너비입니다.

outset: 테두리 이미지 영역이 테두리를 초과하는 정도입니다. REPEAT : 이미지 테두리를 반복, 둥글게 또는 스트레칭 해야하는지 여부 브라우저 호환성 문제에 대한주의를 기울여야합니다

div{
border:20px solid transparent;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
padding:10px 20px;
border-image:url(images/12.png) 50 50 round;
-moz-border-image:url(images/12.png) 50 50 round; /* Firefox */
-webkit-border-image:url(images/12.jpg) 50 50 round; /* Safari 和 Chrome */
-o-border-image:url(images/12.png) 50 50 round; /* Opera */
}

(3) 테두리 둥근 모서리 둥근 모서리- r

div{
width:150px;
height:30px;
border:2px solid #ccc;
border-radius:25px;
line-height: 30px;
text-align: center;
}

summary : 위 내용은 이 글의 전체 내용입니다. 그것이 모두에게 도움이 되기를 바랍니다.

위 내용은 CSS3에서 테두리 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!