CSS에서 둥근 모서리와 오목한 효과를 얻는 방법
- 王林앞으로
- 2020-07-14 17:05:434851검색
구현 아이디어:
(권장 튜토리얼: css 빠른 시작)
두 개의 div가 나란히 있고 두 번째 div에서 너비와 높이가 두 배인 item이라는 항목을 정의하고 테두리 반경을 설정합니다. 50%로 설정한 다음 절대 위치로 설정합니다.
코드 구현:
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.box {
width: 50px;
height: 50px;
overflow: hidden;
background: #655;
text-align: center;
position: relative;
float: left;
}
.item {
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
position: absolute;
top: -50px;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box">
<div class="item"></div>
</div>
</body>
</html> 구현 효과:
위 내용은 CSS에서 둥근 모서리와 오목한 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제