CSS3 border-radius 속성을 사용하면 모든 요소에 대해 "둥근 모서리"를 만들 수 있습니다. border-radius 속성을 사용하면 다음 규칙을 사용할 수 있습니다.
(1) 네 가지 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 아래 모서리, 네 번째 값은 왼쪽 아래 모서리입니다. (2) 세 가지 값: 첫 번째 값 값은 왼쪽 상단 모서리, 두 번째 값은 오른쪽 상단 모서리 및 왼쪽 하단 모서리, 세 번째 값은 오른쪽 하단 모서리입니다. (3) 두 가지 값: 첫 번째 값은 왼쪽 상단 모서리와 오른쪽 하단 모서리입니다. 두 번째 값은 오른쪽 상단 모서리와 왼쪽 하단 모서리입니다. (4) 하나의 값: 4개의 필렛 값이 동일합니다.
그래픽에 둥근 모서리 효과를 적용하려면 border-radius 속성 하나만 추가하면 됩니다. 매우 둥글게 만들고 싶다면 이 값을 늘리십시오.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>홈페이지</title>
<스타일>
div{
너비: 100px;
높이: 100px;
배경색: rgb(151, 26, 49);
테두리 반경: 10px;
}
이미지{
너비: 100px;
높이: 100px;
테두리 반경: 10px;
}
</style>
</head>
<본문>
<div>
<img src="../vue/1.jpg">
</div>
</body>
</html>둥근 모양을 원하시면 100%라고 쓰시면 됩니다.
상자 그림자 그림자 효과
margin: 0 auto: 상단과 하단을 제어할 필요가 없습니다. Auto를 사용하면 왼쪽과 오른쪽 공간을 균등하게 분배한 다음 상자를 중앙에 배치합니다. 왼쪽과 오른쪽 공간 사이의 간격을 균등하게 분배하는 것이 자동이 하는 일입니다.
0은 수평 방향의 그림자가 없음을 의미하고, 두 번째 0은 수직 방향의 그림자가 없음을 의미하며, 세 번째는 그림자의 흐림을 의미합니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>홈페이지</title>
<link href="" type="text/css" rel="스타일시트"/>
<스타일 유형="텍스트/css">
div{
너비: 500px;
높이: 500px;
배경색: 녹색노란색;
여백: 0 자동;
상자 그림자: 0 0 50px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<본문>
<div 클래스="d1">
</div>
</body>
</html>이것으로 새로운 CSS3 기능인 box-shadow 그림자 효과 및 둥근 테두리 반경에 대한 기사를 마칩니다. 새로운 CSS3 기능인 box-shadow에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래에서 계속해서 관련 기사를 찾아보시기 바랍니다. 앞으로 downcodes.com을 더 많이 지원하게 될 것입니다!