CSS 입문 튜토리얼: 이미지 테두리 테두리
- 高洛峰원래의
- 2017-02-08 10:07:041569검색
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 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 CSS(속성)에 대한 예비 탐색다음 기사：HTML의 CSS(속성)에 대한 예비 탐색