마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?

藏色散人

풀어 주다： 2018-08-10 13:35:45

원래의

3445명이 탐색했습니다.

이 글에서는 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>

로그인 후 복사

위 코드의 테스트 효과는 다음과 같습니다.

마우스가 사진 위로 움직일 때 CSS를 사용하여 사진에 테두리 효과를 추가하는 방법은 무엇입니까?