1. 이미지 테두리
'CSS 테두리' 섹션에서 테두리 속성에 대해 자세히 설명합니다. CSS에서는 border 속성을 사용하여 이미지의 테두리를 정의합니다.
구문:
테두리 너비: 픽셀 값
테두리 스타일: 속성 값
테두리 -color: 색상값;
참고: 또는 "border:1px solid grey;"와 같이 간결한 테두리 작성 방법을 사용하세요.
참고:
테두리 속성을 잊어버린 경우 돌아가서 직접 검토하세요.
예 1:
<!DOCTYPE html>
<head>
<title>图片边框border</title>
<style type="text/css">
img
{
width:60px;
height:60px;
border:1px solid red;
}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>는 다음과 같이 브라우저에서 미리 볼 수 있습니다.
예 2:
<!DOCTYPE html>
<head>
<title>图片边框border</title>
<style type="text/css">
img{width:60px;height:60px;}
img:hover{border:1px solid gray;}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>는 탐색 브라우저 미리보기 효과는 다음과 같습니다:
분석: 이 예에서는 ":hover 의사 클래스"를 사용하여 다음과 같은 경우 회색 테두리가 표시되도록 정의합니다. 마우스가 이미지 위로 지나갑니다.
더 많은 입문 CSS 튜토리얼: 이미지 테두리 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
