페이지 개발 시 페이지를 아름답게 하기 위해 작은 그래픽이 필요한 경우가 많습니다. 이러한 그래픽은 그림 형태로 표시될 수 있지만 페이지가 로드될 때마다 그림을 로드하는 데 시간이 걸립니다. 그렇다면 CSS를 사용하여 이러한 그래픽을 구현하는 방법은 무엇일까요? 이 장에서는 CSS를 사용하여 border 및 border-radius(코드 예제)를 사용하여 작은 그래픽을 그리는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
우리 대부분은 border 속성에 4개의 매개변수가 있다는 것을 알고 있으므로 border-radius에도 4개의 매개변수가 있어야 합니다.
border 속성의 4가지 매개변수는 border-top, border-right, border-bottom, border-left.(시계 방향)
그러면 border-radius의 네 가지 매개 변수는 무엇인가요?
border-radius: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래
아래에서는 border-radius를 사용하여 몇 가지 일반적인 그림을 그립니다.
1. 단순한 원
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style type = "text/css" >
#div{
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
}
</ style >
</ head >
< body >
< div id = "div" >
</ div >
</ body >
</ html >
|
로그인 후 복사
렌더링:
2. 타원형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style type = "text/css" >
#div{
width: 100px;
height: 200px;
background: red;
border-radius: 50%;
}
</ style >
</ head >
< body >
< div id = "div" >
</ div >
</ body >
</ html >
|
로그인 후 복사
렌더링:
3.
4. 계란
레오나르도 다빈치가 계란을 그렸다고 들었는데 여기서는 CSS를 사용하여 계란을 그립니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style type = "text/css" >
#div{
position: relative;
width: 200px;
height: 180px;
border: 1px solid black;
}
.left{
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 170px;
background: red;
/*左下角为旋转基点*/
transform-origin: 0 100%;
transform: rotate(-45deg);
border-radius: 50% 50% 0 0;
/*让left的上左和上右变成圆形就可以*/
}
.right{
position: absolute;
top: 0;
left: 0px;
width: 100px;
height: 170px;
background: red;
/*右下角为旋转基点*/
transform-origin: 100% 100%;
transform: rotate(45deg);
border-radius: 50% 50% 0 0;
/*让right的上左和上右变成圆形就可以*/
}
</ style >
</ head >
< body >
< div id = "div" >
< div class = "left" ></ div >
< div class = "right" ></ div >
</ div >
</ body >
</ html >
|
로그인 후 복사
Rendering:
5. Dialog
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style type = "text/css" >
#div{
position: relative;
width: 100px;
height: 180px;
background: red;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*border-radius参数在/左右的区别,/左边是四个圆角的水平半径/右边是四个圆角垂直半径*/
}
</ style >
</ head >
< body >
< div id = "div" >
</ div >
</ body >
</ html >
|
로그인 후 복사
Rendering:
6 .Yin Yang
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style type = "text/css" >
#div {
width: 120px;
height: 80px;
background: red;
position: relative;
border-radius: 10px;
margin-left: 50px;
}
#div:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</ style >
</ head >
< body >
< div id = "div" >
</ div >
</ body >
</ html >
|
로그인 후 복사
렌더링:
7. 무한대 기호
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style type = "text/css" >
#baGua {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#baGua:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 50%;
width: 12px;
height: 12px;
}
#baGua:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</ style >
</ head >
< body >
< div id = "baGua" >
</ div >
</ body >
</ html >
|
로그인 후 복사
렌더링:
위 내용은 CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!