CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)-CSS 지식-php.cn

CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)

藏色散人

풀어 주다： 2018-09-13 16:41:37

원래의

13097명이 탐색했습니다.

CSS 둥근 테두리 효과는 일반적으로 프런트엔드 웹 디자인의 탐색 모음이나 프롬프트 상자에 사용됩니다. CSS를 통해 둥근 테두리나 둥근 이미지를 설정하는 효과는 웹페이지 전체를 더욱 풍성하게 보이게 할 수 있습니다.

이 글에서는 css를 사용하여 둥근 테두리 효과를 설정하는 방법을 소개합니다. 아래에서는 구체적인 코드 예시를 통해 관련 지식을 자세히 설명하겠습니다.

css 둥근 테두리 코드예제는 다음과 같습니다.

예제 1: CSS 단면 둥근 테두리 효과

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>css圆角边框代码示例</title>
   <style type="text/css">
      div{
         width: 200px;
         height: 200px;
         background: #A6E22B;
         margin: 20px auto;
         /*实现单边圆角*/
         border-top-left-radius:20px;
            border-top-right-radius:20px;
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
      }
   </style>
</head>
<body>
<div></div>
</body>
</html>

로그인 후 복사

위 코드에서는 한 변의 길이가 200인 정사각형을 만들었습니다. 20px의 CSS 스타일 border-top-left-radius만 추가하면 이 div의 왼쪽 상단 둥근 모서리 효과가 달성됩니다. 아래와 같이

CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)

20px의 CSS 스타일 border-top-right-radius를 계속 추가하면 상단에 둥근 모서리만 추가하는 효과가 나타납니다. 아래와 같이:

CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)

그런 다음 계속해서 두 개의 CSS 스타일인 border-bottom-left-radius와 border-bottom-right-radius를 추가합니다. 즉, 브라우저에서 위 코드의 최종 효과는 다음과 같습니다.

CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)

위의 일련의 설명을 통해 CSS 둥근 테두리에 대한 중요한 지식 포인트를 발견하셨나요? 이것이 바로 border-radius 속성입니다! 이 속성은 네 가지 border-*-radius 속성을 설정하기 위한 단축 속성입니다. 이 속성은 요소에 둥근 테두리를 추가하는 데 사용됩니다!

예제 2: CSS 원형 테두리 효과

 /*同时实现四个边圆角*/
 border-radius: 100px;

로그인 후 복사

예제 1의 HTML 코드를 기반으로 측면 길이가 200px인 정사각형 div 블록에 CSS 테두리 반경 스타일 속성만 추가하고 값을 다음과 같이 설정합니다. 100px 반경을 100px로 설정합니다. 렌더링 효과는 아래 그림과 같습니다.

CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)

이 기사는 CSS에서 둥근 테두리 설정에 대한 구체적인 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다! 더 많은 HTML/css 지식을 얻으려면 PHP 중국어 웹사이트 HTML 비디오 튜토리얼 및 CSS 비디오 튜토리얼

을 따라가세요.

위 내용은 CSS로 둥근 테두리와 원형 효과를 얻는 방법은 무엇입니까? (사진 + 비디오 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!