집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 테두리 속성을 통해 이미지에 테두리 효과를 설정하는 방법

CSS 테두리 속성을 통해 이미지에 테두리 효과를 설정하는 방법

不言원래의: 2018-07-16 16:34:235692검색

CSS를 통해 이미지에 테두리를 설정하는 방법 HTML에서는 a1f02c36ba31691bcfe87b2722de723b 태그의 border 속성 값을 통해 이미지에 테두리를 추가합니다. border 속성, border-style은 점선, 실선, 점선 등 테두리의 스타일을 정의합니다.

HTML은 이미지의 테두리를 설정합니다

HTML에서 a1f02c36ba31691bcfe87b2722de723b 태그의 테두리 속성 값은 테두리의 두께를 조절하기 위해 이미지에 테두리를 추가합니다. 값이 0이면 테두리가 없음을 의미합니다.

<span style="font-size:24px;">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="0">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="1">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="2">
</span>

코드는 위와 같습니다. 테두리가 모두 검은색이고, 스타일이 매우 단조롭고, 테두리의 굵기만 조정할 수 있습니다. .

CSS는 이미지의 테두리를 설정합니다

Dreamweaver의 구문 팁을 사용하면 다양한 정보를 쉽게 얻을 수 있습니다. 테두리 스타일의 값입니다.

border-color를 통해 테두리의 색상을 정의하고, border-width를 통해 테두리의 두께를 정의할 수 있습니다.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			边框
		</title>
		<style>
			<!--
			img.test1{
			border-style:dotted;
			border-color:#FF9900;
			border-width:5px;
		}
			img.test2{
			border-style:dashed;
			border-color:blue;
			border-width:2px;
		}
			-->
		</style>
	</head>

	<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test2">
	</body>
</span>
</html>

코드는 위와 같습니다. 첫 번째 사진의 효과는 황금색 노란색, 너비 5픽셀의 점선이고 두 번째 그림은 파란색, 너비 2픽셀입니다. 점선.

CSS에서는 border-left, border-right, border-top 및 border-bottom의 네 가지 테두리 스타일을 설정할 수 있습니다.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			分别设置4个边框
		</title>
		<style>
			<!--
			img{
			border-left-style:dotted;
			border-left-color:#FF9900;
			border-left-width:5px;
			border-right-style:dashed;
			border-right-clolr:#33CC33;
			border-right-width:2px;
			border-top-style:solid;
			border-top-color:#CC00FF;
			border-top-width:10xp;
			border-bottom-style:groove;
			border-bottom-color:#666666;
			border-bottom-width:15px;
		}
			-->
		</style>
	</head>

	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"">
	</body>
</span>
</html>

코드는 위와 같으며, 이미지의 네 가지 테두리에 대해 서로 다른 스타일을 설정합니다. 이 방법은 다른 많은 HTML 요소에서도 자주 사용됩니다.

Border 속성을 사용하면 각 값을 동일한 문에 공백으로 구분하여 쓸 수도 있으므로 코드 길이를 크게 줄일 수 있습니다.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			合并各CSS值
		</title>
		<style>
			<!--
			img.test1{
			border:5px double #FF00FF;
		}
			img.test2{
			border-right:5px double #FF00FF;
			border-left:8px solid #0033FF;
		}
			-->
		</style>
	</head>

	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
	</body>
</span>
</html>

이렇게 하면 웹페이지의 다운로드 속도가 빨라지고 더 명확하고 읽기 쉬워집니다.

또한 각 속성 값을 함께 쓸 수 있는 테두리 속성 외에도 글꼴, 여백, 등 CSS의 다른 많은 속성도 유사한 작업을 수행할 수 있습니다. padding 등 속성을 통일할 수 있습니다.

<span style="font-size:24px;">
p{
	font:italic bold 30px Arial,Helvetica,sans-serif;
	padding:0px 5px 0px 3px;
}
</span>

CSS 테두리 속성을 통해 이미지에 테두리 효과를 설정하는 방법

관련 기사