CSS에서 이미지의 둥근 모서리를 얻는 방법-CSS 튜토리얼-php.cn

CSS에서 이미지의 둥근 모서리를 얻는 방법

藏色散人

풀어 주다： 2023-01-04 09:37:37

원래의

6863명이 탐색했습니다.

CSS를 사용하여 이미지에 둥근 모서리를 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 div 요소를 만들고 마지막으로 CSS3의 "border-radius" 속성을 통해 요소에 둥근 모서리를 추가합니다.

CSS에서 이미지의 둥근 모서리를 얻는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

CSS 둥근 모서리

css2.1 요소에 둥근 모서리를 추가하는 것은 매우 번거로운 작업입니다. 이전 방법은 이를 달성하기 위해 배경 이미지를 사용하는 것입니다. 만들기 귀찮음. CSS3에서는 border-radius 속성을 사용하면 둥근 모서리 속성을 완벽하게 해결할 수 있습니다.

Syntax

border-radius: 길이 값;

지침:

길이 값은 px, 백분율, em 등이 될 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

로그인 후 복사

Set border-radius: 10px 4개의 모깎기 반경은 모두 10px입니다.

CSS에서 이미지의 둥근 모서리를 얻는 방법

border-radius 속성 값을 쓰는 방법은 4가지가 있습니다(margin, padding과 유사)

(1) border-radius: 하나의 값

결과는 위와 같습니다

(2) border- radius: 두 값;

예: border-radius: 10px 20px; 왼쪽 상단 모서리와 오른쪽 하단 모서리가 10px이고 오른쪽 상단 모서리와 왼쪽 하단 모서리가 20px임을 의미합니다. 3) border-radius: 세 가지 값을 설정합니다.

예:border-radius:10px 20px 30px; 왼쪽 위 모서리, 오른쪽 위 모서리, 왼쪽 아래 모서리 및 왼쪽 아래 모서리의 모서리 반경이 10px, 20px임을 나타냅니다. , 30px

Result

CSS에서 이미지의 둥근 모서리를 얻는 방법

(4) border-radius: 4개의 값을 설정합니다

예: border-radius: 10px 20px 30px 40px; 왼쪽 위 모서리, 오른쪽 위 모서리, 아래쪽 모서리 반경을 나타냅니다. 오른쪽 모서리와 왼쪽 하단 모서리는 10px 20px 30px 40px

Result

CSS에서 이미지의 둥근 모서리를 얻는 방법

다음 효과를 얻습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        img{
            width: 300px;
            border-radius:80% 90% 100% 20%;
        }
    </style>
</head>
<body>
    <img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"   / alt="CSS에서 이미지의 둥근 모서리를 얻는 방법" >
    
</body>
</html>

로그인 후 복사

위 내용은 CSS에서 이미지의 둥근 모서리를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!