CSS에서는 border-radius 속성을 사용하여 이미지의 둥근 모서리를 설정할 수 있습니다. 이미지 요소에 "border-radius: value;" 스타일만 설정하면 됩니다. 이 속성에 값을 제공하면 네 모서리의 반경이 동시에 설정됩니다. 모든 합법적인 CSS 측정을 사용할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS3 둥근 모서리에는 border-radius("테두리 반경"을 의미) 속성 하나만 설정하면 됩니다. 네 모서리의 반경을 동시에 설정하려면 이 속성에 값을 제공합니다. em, ex, pt, px, 백분율 등 모든 합법적인 CSS 측정을 사용할 수 있습니다.
예:
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">
<title>设置背景圆角</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<style type="text/css">
.normal{
background-image: url(images/rest.png);
width: 215px;
height: 215px;
border-radius: 50%;
background-size: 215px;
background-repeat: no-repeat;
background-position-y: 9%;
}
</style>
</head>
<body>
<!--
原图尺寸是：599*531px的
-->
<div></div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>
</html>원본 사진:
배경 설정 후 효과:
추천 학습: css 비디오 튜토리얼
위 내용은 CSS에서 이미지의 둥근 모서리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
