HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)-HTML 튜토리얼-php.cn

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)

奋力向前

풀어 주다： 2021-08-19 19:11:52

원래의

21162명이 탐색했습니다.

이전 글 "CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 단계별로 가르쳐주세요(자세한 코드 설명)"에서는 CSS를 사용하여 둥근 버튼 효과를 만드는 방법을 소개했습니다. 다음 기사에서는 HTML을 사용하여 사진에 테두리 효과를 추가하는 방법을 함께 살펴보겠습니다.

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)

사진에 테두리 효과를 추가하는 방법

1. 코드를 작성하고 그림 효과를 추가하는 방법에는 두 가지가 있습니다

한 가지 방법은 그림에 획을 추가하거나 상자 외부에 획을 추가하는 것입니다.

두 번째 방법: img 이미지 태그를 직접 추가합니다.

두 가지 방법 중 하나를 선택하세요. 저는 두 번째 방법을 사용합니다.

코드예제

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)" >
</div>

로그인 후 복사

코드효과

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)

코드효과가 나오더니 테두리가 없는걸 발견했어요.

2. 사진에 테두리 설정을 추가합니다. 스타일: 테두리 스타일, 스타일에는 실선, 점선 등이 포함됩니다. 색상은 테두리 색상으로 설정되고 두께는 테두리 너비로 설정됩니다.

참고: 테두리 스타일은 테두리 스타일이므로 이것이 중요합니다. 그렇지 않으면 다른 모든 속성이 유효하지 않습니다.

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

로그인 후 복사

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)

코드 효과가 나오면 테두리 색상이 되고 이제 테두리는 점선으로 구성됩니다

3 이 세 가지 속성을 하나의 속성으로 결합합니다. border:dashed 5px blue 효과; 여전히 동일합니다. 매우 편리합니다.

div img{
border:dashed 5px blue;
}

로그인 후 복사

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)

세 가지 속성이 하나의 속성으로 결합되므로 코드 효과는 여전히 동일합니다. 그런 다음 이미지의 한쪽에만 효과를 추가하도록 선택합니다.

4. 왼쪽: 테두리-왼쪽, 오른쪽: 테두리-오른쪽, 위쪽: 테두리-상단, 아래쪽: 테두리-왼쪽.

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

로그인 후 복사

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)

5. 코드 효과가 거의 나온 상태입니다. 테두리 너비를 늘릴 수 있나요? div의 border 속성을 통해 테두리 색상을 조절하고, 테두리 너비를 20px로 설정하고, 색상을 blue

div img{
	border:dashed 5px blue;
	border-right:solid 20px blue; 
	border-top: solid 20px blue;
    border-bottom: solid 20px blue;
    border-left:  solid 20px blue

로그인 후 복사

HTML을 사용하여 이미지에 테두리 효과를 추가하는 방법을 알려주는 한 가지 요령(자세한 코드 설명)