HTML은 둥근 사각형 예제를 쉽게 구현합니다.
- 高洛峰원래의
- 2017-03-12 17:05:492918검색
이 글에서는 둥근 사각형 예제를 Html에서 쉽게 구현하는 방법을 중심으로 자세히 소개하고, p+css와 positioning을 통해 둥근 사각형을 구현하는 방법을 알려드리겠습니다. 관심 있는 친구들은
을 참조하세요. 질문: p+css와 위치 지정을 통해 둥근 사각형을 구현하는 방법은 무엇입니까?
솔루션 개요:
내용: 먼저 6c04bd5ca3fcae76e30b72ad730ca86d 태그 내부에 큰 레이어를 추가합니다(큰 레이어는 전체 큰 프레임을 수정하는 데 사용됩니다). ) 큰 레이어에는 4개의 작은 레이어가 포함되어 있습니다(4개의 작은 레이어 각각에 4개의 둥근 모서리를 배치합니다(PS를 사용하여 미리 타원형 모양을 만든 다음 슬라이스 도구 를 사용하여 이미지 자르기))
스타일: head>에 설정해야 하는 속성 :
1.위치 : 상대적;
2. 너비 및 높이
3 배경색
4. 원래 모서리의 상대적 위치를 조정하는 데 사용됩니다. 조정 후 테두리 선 설정을 삭제할 수 있습니다)
작은 레이어의 CSS를 설정할 때 각 레이어에 포함되어야 하는 속성은 다음과 같습니다.
1.위치: 절대; >
2. 너비 및 높이
3. 방향 속성(
왼쪽, 오른쪽, 하단, 상단)
4.
배경: url ("") no-repeat; (모든 방향에서 둥근 모서리 이미지 도입)
다음은 구현하려는 코드입니다. 둥근 직사각형:
!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>圆角制作</title>
<style type=text/css>
#p
{
position:relative;
width:400px;
height:200px;
background:black;
margin:auto;
}
#plefttop
{
position:absolute;
width:50px;
height:50px;
background:url("images/11.jpg") no-repeat;
}
#prighttop
{
position:absolute;
width:50px;
height:50px;
right:-9px;
top:0px;
background:url("images/22.jpg") no-repeat;
}
#pleftbottom
{
position:absolute;
width:50px;
height:50px;
left:0px;
bottom:-14px;
background:url("images/33.jpg") no-repeat;
}
#prightbottom
{
position:absolute;
width:50px;
height:50px;
right:-9px;
bottom:-14px;
background:url("images/44.jpg") no-repeat;
}
</style>
</head>
<body>
<p id=p>
<p id=plefttop></p>
<p id=prighttop></p>
<p id=pleftbottom></p>
<p id=prightbottom></p>
</p>
</body>
</html>참고: 내 코드에 사용된 CSS 스타일은 인라인, 임베디드 및 외부의 세 가지 CSS 스타일입니다. 위 내용은 HTML은 둥근 사각형 예제를 쉽게 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!