Html에서 테두리 반올림 구현 예에 대한 자세한 설명
- Y2J원래의
- 2017-05-24 09:53:554740검색
이 글에서는 주로 HTML에서 둥근 사각형을 쉽게 구현하는 방법을 자세히 소개하고, p+css와 포지셔닝을 통해 둥근 사각형을 구현하는 방법을 알려드리겠습니다. 관심 있는 친구들은
을 참조하세요. 질문: p+css와 위치 지정을 통해 둥근 직사각형을 얻는 방법은 무엇입니까?
솔루션 개요:
내용: 먼저 6c04bd5ca3fcae76e30b72ad730ca86d 태그 내부에 큰 레이어를 추가합니다(큰 레이어는 전체 큰 프레임을 수정하는 데 사용됩니다). ) 그리고 큰 레이어에는 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 스타일입니다.
[관련 추천]
1.
HTML 무료 동영상 튜토리얼html은 고정된 테이블을 구현하고 위로 스크롤할 수 있습니다. 아래, 왼쪽 및 오른쪽프론트엔드 개발에서 일반적으로 사용되는 HTML 태그에 대한 자세한 설명5. HTML로 개인 이력서 작성 코드 예시
위 내용은 Html에서 테두리 반올림 구현 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!