Html에서 테두리 반올림 구현 예에 대한 자세한 설명-HTML 튜토리얼-php.cn

Html에서 테두리 반올림 구현 예에 대한 자세한 설명

Y2J

풀어 주다： 2017-05-24 09:53:55

원래의

4744명이 탐색했습니다.

이 글에서는 주로 HTML에서 둥근 사각형을 쉽게 구현하는 방법을 자세히 소개하고, p+css와 포지셔닝을 통해 둥근 사각형을 구현하는 방법을 알려드리겠습니다. 관심 있는 친구들은

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

솔루션 개요:

내용: 먼저 태그 내부에 큰 레이어를 추가합니다(큰 레이어는 전체 큰 프레임을 수정하는 데 사용됩니다). ) 그리고 큰 레이어에는 4개의 작은 레이어가 포함되어 있습니다(4개의 작은 레이어 각각에 4개의 둥근 모서리를 배치합니다(PS를 사용하여 미리 타원형 모양을 만든 다음 슬라이스 도구를 사용하여 이미지를 잘라냅니다))

스타일: head>에 설정된 속성 에는

위치가 있어야 합니다. ;
2. 너비 및 높이;

3 배경색

4. 원래 모서리 4개의 상대적 위치를 조정하는 데 사용됩니다. 경계선 설정 가능
삭제)
작은 레이어의 CSS를 설정할 때 각 레이어에 있어야 하는 속성은 다음과 같습니다.

1.위치: 절대 ;

2. 너비 및 높이

3. 방향 속성(
왼쪽, 오른쪽, 하단top) 4.
배경
: url("") 반복 없음(모든 방향에서 둥근 모서리 소개 사진) 모서리 직사각형에 대한 원 코드를 구현한 방법은 다음과 같습니다.

XML/HTML 코드복사 콘텐츠를 클립보드에

<!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 무료 동영상 튜토리얼

html은 고정된 테이블을 구현하고 위로 스크롤할 수 있습니다. 아래, 왼쪽 및 오른쪽

프론트엔드 개발에서 일반적으로 사용되는 HTML 태그에 대한 자세한 설명

4. 마퀴 태그를 통한 스크롤 효과

5. HTML로 개인 이력서 작성 코드 예시

위 내용은 Html에서 테두리 반올림 구현 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!