>  기사  >  웹 프론트엔드  >  CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)

CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)

藏色散人
藏色散人원래의
2018-08-14 10:59:202650검색

이 글에서는 CSS를 사용하여 이미지에 둥근 테두리를 만드는 방법을 주로 소개합니다.

1 CSS 이미지의 왼쪽이 둥글게 됩니다.

코드 예:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css图片左边变成圆角</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .wrapper img {
            border-top-left-radius:2em;
            border-bottom-left-radius:2em;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <img  src="2.png" / alt="CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)" >
</div>
</body>
</html>

효과는 다음과 같습니다. 아래와 같이: # 🎜🎜#

CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)

2 CSS 이미지는 중앙에 있고 CSS 이미지에는 둥근 테두리가 있습니다. #🎜 🎜#코드 예시 :

<!DOCTYPE HTML>
<html>
<head>
    <title>css img 圆形角边示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .wrapper{
            width: 200px;
            height: 100px;
            margin: 0 auto;
        }
        .wrapper img {
            border-radius:2em;
        }
    </style>
</head>
<body>
<div>
    <img  src="2.png" / alt="CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)" >
</div>
</body>
</html>

효과는 다음과 같습니다:

CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)
중요 관련된 속성은 border-radius입니다. 이 속성을 통해 이미지의 둥근 모서리를 얻을 수 있습니다.

border-radius 속성은 다음과 같습니다:

border-radius: 2em, 이는 네 모서리가 모두 둥글다는 의미이며, 각 둥근 모서리의 반경은 2em입니다.

border-radius:2em2em과 같은 두 가지 값을 설정할 수 있습니다. 첫 번째 값은 왼쪽 위 둥근 모서리와 오른쪽 아래 둥근 모서리를 나타내고 두 번째 값은 오른쪽 위 둥근 모서리를 나타냅니다. 왼쪽 아래 둥근 모서리.

3개의 값 설정(예: border-radius: 2em 2em 2em) 첫 번째 값은 왼쪽 상단 둥근 모서리를 나타내고, 두 번째 값은 오른쪽 상단과 왼쪽 하단 둥근 모서리를 나타내며, 세 번째 값은 오른쪽 아래 원형 경적.

border-radius: 2em 2em 2em2em과 같은 4개의 값을 설정합니다. 4개의 값은 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래 및 왼쪽 아래를 나타냅니다.

4개의 모서리를 4개의 별도 속성으로 분할하여 설정할 수도 있습니다(예: 왼쪽 상단 모서리(테두리-왼쪽 상단-반경), 오른쪽 상단 모서리(테두리-오른쪽 상단-반경)) ), 오른쪽 하단(테두리-하단 오른쪽 반경) 및 하단 왼쪽 둥근 모서리(테두리-하단 왼쪽 반경).

위는 CSS를 사용하여 그림을 둥근 모서리로 만드는 방법에 대한 소개이며, 이는 특정 참조 값을 갖습니다. 도움이 필요한 친구들에게 조금이나마 도움이 되길 바랍니다.

【관련 기사 추천】

php는 둥근 모서리 이미지 코드 생성


#🎜🎜 #div 요소에 둥근 테두리를 추가하는 방법


HTML5 Canvas를 사용하여 둥근 사각형 그리기 및 일부 관련 응용 프로그램 예제_html5 튜토리얼 기술#🎜 🎜##🎜🎜 #

CSS3 둥근 모서리, 상자 그림자 및 테두리 이미지에 대한 자세한 설명

위 내용은 CSS를 사용하여 이미지의 임의 둥근 모서리 스타일을 제어하는 ​​방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.