CSS3를 사용하여 다양한 타원을 빠르고 쉽게 그리는 방법
- 坏嘻嘻원래의
- 2018-09-29 10:30:495834검색
과거 프런트엔드 개발에서는 이러한 특수 그래픽을 위해 대부분의 프런트엔드 개발자가 이미지 자르기를 사용하여 특수 그래픽을 삽입했지만 이제는 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를 사용하여 타원을 그리고 그림을 삽입합니다# 🎜 🎜#
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.