CSS 입문 튜토리얼: 이미지 테두리 테두리-CSS 튜토리얼-php.cn

CSS 입문 튜토리얼: 이미지 테두리 테두리

高洛峰

풀어 주다： 2017-02-08 10:07:04

원래의

1606명이 탐색했습니다.

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>

로그인 후 복사

는 다음과 같이 브라우저에서 미리 볼 수 있습니다.

CSS 입문 튜토리얼: 이미지 테두리 테두리

예 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>

로그인 후 복사

는 탐색 브라우저 미리보기 효과는 다음과 같습니다:

CSS 입문 튜토리얼: 이미지 테두리 테두리