마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?
- 藏色散人원래의
- 2018-08-10 13:35:453388검색
이 글에서는 CSS를 사용하여 이미지에 테두리를 추가하는 방법을 소개합니다. 웹사이트를 구축할 때 CSS 이미지에 테두리를 추가하면 일반적으로 제품 이미지를 강조하거나 이미지를 가리키는데, 이는 사용자가 클릭하고 싶게 만들 수도 있습니다. 실제로 CSS 이미지에 테두리를 추가하는 방법에 대한 문제는 인터넷 검색만으로도 많은 해결 방법을 찾을 수 있습니다. 하지만 오늘은 가장 간단한 코드를 사용하여 CSS로 테두리를 추가하는 방법을 보여 드리겠습니다. 관심있는 분들에게 도움이 되길 바랍니다.
CSS 이미지에 테두리를 추가하는 구체적인 코드 예는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>css图片加边框代码测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ffffff;color:#06c;}
em{ font-style:inherit;}
img{background:white;margin:0 5px;width:70px;height:70px;}
img:hover{border:1px red solid;}
.demo2 img{border:1px solid transparent;}
.demo2 img:hover{border:1px red solid;}
.demo3 img:hover{width:68px;height:68px;border:1px solid yellow;}
</style>
</head>
<body>
<div>
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<em>这里可以明显看到当img标签在hover的时候由于出现边框导致位移</em>
</div>
<div>
<img src="2.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="2.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="2.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="2.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<em>在这里给每个img添加border:1px solid transparent;</em>
</div>
<div>
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<img src="1.png" / alt="마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?" >
<em>在这里修改width和height</em>
</div>
</body>
</html>위 코드의 테스트 효과는 다음과 같습니다.
참고: :hover 선택기는 요소를 선택하는 데 사용됩니다. 마우스 포인터가 떠 있는 것입니다.
팁: :hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.
팁: :link 선택기는 방문하지 않은 페이지를 가리키는 링크 스타일을 설정하고, :visited 선택기는 방문한 페이지에 대한 링크를 설정하는 데 사용되며, :active 선택기는 활성 링크에 사용됩니다.
참고: 스타일을 적용하려면 CSS 정의에서 :hover를 :link 및 :visited(있는 경우) 뒤에 배치해야 합니다.
이 글은 CSS 이미지에 테두리를 추가하는 방법을 자세히 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.
위 내용은 마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!