CSS3를 사용하여 다양한 타원을 빠르고 쉽게 그리는 방법-CSS 튜토리얼-php.cn

CSS3를 사용하여 다양한 타원을 빠르고 쉽게 그리는 방법

坏嘻嘻

풀어 주다： 2018-09-29 10:30:48

원래의

5884명이 탐색했습니다.

과거 프런트엔드 개발에서는 이러한 특수 그래픽을 위해 대부분의 프런트엔드 개발자가 이미지 자르기를 사용하여 특수 그래픽을 삽입했지만 이제는 CSS3를 통해 다양한 모양을 그릴 수 있습니다. 이 글은 CSS3를 사용하여 다양한 타원을 그리는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css3를 사용하여 다양한 타원을 그리는 원리

테두리에는 CSS3를 사용해야 합니다- radius 속성에서 너비 값을 200px로 수정한 다음 border-radius를 100px/50px로 변경합니다. "/" 앞은 수평 반경이고 "/" 뒤는 수직 반경이므로 100px/50px는 div an ellipse.border-radius: 100px/50px;

css3에서 border-radius 속성을 사용해야 하므로 오늘은 border-radius 속성에 대해 자세히 알아보도록 하겠습니다.

border-radius attribute

Meaning: border-radius 속성 단축 속성은 둥근 테두리를 추가합니다. 요소.
구문: 테두리 반경: 1-4 길이|% / 1-4 길이|%;
#🎜 🎜#브라우저 호환성: IE9+, Firefox 4+, Chrome, Safari 5+ 및 Opera는 border-radius 속성을 지원합니다.

css3을 사용하여 다양한 타원을 그리는 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
#rcorners1 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2{
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

로그인 후 복사

# 🎜🎜##🎜 🎜#

효과 예시는 사진에 나와 있습니다

# 🎜🎜#

CSS3를 사용하여 다양한 타원을 빠르고 쉽게 그리는 방법

CSS3를 사용하여 다양한 타원을 빠르고 쉽게 그리는 방법 응용 프로그램: CSS3를 사용하여 타원을 그리고 그림을 삽입합니다# 🎜 🎜#

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img {   
    border-radius: 50%;   
}   
</style>  
</head>  
<body>  
<h2>椭圆形图片</h2>  
<p>使用 border-radius 属性来创建椭圆形图片：</p>  
<img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">  
</body>  
</html>

로그인 후 복사

효과 예시는 그림과 같습니다

#🎜 🎜#

위 내용은 CSS3를 사용하여 다양한 타원을 빠르고 쉽게 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!