div css3 border-radius 둥근 모서리 DIV 둥근 모서리 이미지 둥근 모서리
- 云罗郡主앞으로
- 2018-10-16 13:59:402702검색
이 기사에서 제공하는 내용은 div css3 border-radius DIV 둥근 모서리 사진에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .
1. css3 단어 및 문법 구조
1. pCSS3 반올림 단어:
border-radius
2. 문법 구조
p{border-radius:5px}
p 개체 상자의 네 모서리를 5픽셀 둥근 효과로 설정
p{border-radius:5px 0;} p 설정 개체 상자의 왼쪽 상단과 오른쪽 하단 모서리는 5px 둥글게 설정되고, 나머지 두 모서리는 0이고 둥글지 않습니다.
p{border-radius:5px 5px 0 0;}
p 개체 상자의 왼쪽 상단과 오른쪽 상단 모서리가 5px 둥글게 설정되고, 나머지 두 모서리는 0이고 둥글지 않습니다
3 설명 ：
border-radius: 3px 4px 5px 6px
는 개체의 왼쪽 상단 모서리를 3px, 오른쪽 상단 모서리를 4px, 아래쪽 모서리를 둥글게 설정하는 것을 의미합니다. 오른쪽 모서리는 5px로, 왼쪽 하단 모서리는 6px로 둥글게 처리합니다.
4. CSS 둥근 모서리 속성 분석 다이어그램
2. CSS3 둥근 모서리 케이스
pCSS5는 CSS3 둥근 모서리를 연습하기 위해 두 개의 p 상자와 하나의 그림에 둥근 모서리를 설정합니다.
1. 케이스 HTML 코드
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象圆角 在线演示 DIVCSS5 VIP</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.divcss5.com --> </head> <body> <div>盒子左上角和右上角对象圆角测试</div> <div class="box">DIV盒子圆角</div> <div>盒子对象个角圆角测试</div> <div class="box3">DIV盒子圆角</div> <p> </p> <div>图片对象圆角测试</div> <div class="box2"><img src="images/logo.gif" /></div> </body> </html>
2. 케이스 CSS 코드:
.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto}
.box2 img{border-radius:5px}
.box3{border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto}
3. 케이스 설명
1) 둥근 모서리 효과를 관찰하기 위해 첫 번째 BOX 상자에는 테두리 스타일이 있습니다. border-radius:5px 5px 0 0; 왼쪽 상단 모서리와 오른쪽 상단 모서리를 둥글게 설정합니다.
2) 두 번째 BOX3 상자의 배경색을 설정하고 둥근 모서리 스타일 border-radius: 5px 0을 설정하고 왼쪽 상단 모서리와 오른쪽 하단 모서리 둥근 모서리를 설정하고
3) 상자의 원을 설정합니다. box2 상자의 이미지 img 모서리 스타일 border-radius:5px, 네 모서리가 모두 둥글게 설정됩니다.
위 내용은 전체 소개입니다. CSS3 비디오 튜토리얼에 대해 더 알고 싶으시면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 div css3 border-radius 둥근 모서리 DIV 둥근 모서리 이미지 둥근 모서리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!