HTML은 둥근 사각형 예제를 쉽게 구현합니다.-HTML 튜토리얼-php.cn

HTML은 둥근 사각형 예제를 쉽게 구현합니다.

高洛峰

풀어 주다： 2017-03-12 17:05:49

원래의

2903명이 탐색했습니다.

이 글에서는 둥근 사각형 예제를 Html에서 쉽게 구현하는 방법을 중심으로 자세히 소개하고, p+css와 positioning을 통해 둥근 사각형을 구현하는 방법을 알려드리겠습니다. 관심 있는 친구들은

을 참조하세요. 질문: p+css와 위치 지정을 통해 둥근 사각형을 구현하는 방법은 무엇입니까?

솔루션 개요:

내용: 먼저 태그 내부에 큰 레이어를 추가합니다(큰 레이어는 전체 큰 프레임을 수정하는 데 사용됩니다). ) 큰 레이어에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!