CSS 학습(3) - css 프레임 스타일(상)
1.css 테두리 소개 a.border-width 설정 굵기 b.border-color 설정 색상 c.border-style 설정 유형 d. 이상은TRBL 원칙을 준수합니다. 예:border-top-style 2.테두리 유형 a. none 테두리 없음 b.hidden 테두리 없음, 그러나 표의 경우 테두리 충돌 해결 c.dotted 점형 테두리 d.dashed 점선 테두리 e.solid 실선 테두리 f.double 쌍선 테두리 g.groove 오목홈 테두리 h.ridge 밭고랑 테두리 i.inset 3d inset 테두리 j.outset 3d outset 테두리 k.inherit 부모 요소에서 테두리 스타일을 계승하여그러나 일부 브라우저에서만 이 속성을 지원합니다. 3.브라우저 접두사: a.-moz-firefox b.-o-Opera c.-khtml-Konqueror d.-ms-Internet Explorer e. 플러그인-prefix-free는 브라우저 접두사를 생략할 수 있습니다. 4.border-image 속성 문법 및 매개 변수: a.none 배경 없음 b.image 배경 그림 c.
2. 실천:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.border-image{
background-color: #6bb2ff;
width:150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(images/border.jpg) 27 round stretch;
-moz-border-image: url( images/border.jpg) 27 round stretch;
-o-border-image: url( images/border.jpg) 27 round stretch;
-ms-border-image: url( images/border.jpg) 27 round stretch;
}
.border-image-repeat{
background-color: #6bb2ff;
width:150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(images/border.jpg) 27 repeat stretch;
-moz-border-image: url( images/border.jpg) 27 repeat stretch;
-o-border-image: url( images/border.jpg) 27 repeat stretch;
-ms-border-image: url( images/border.jpg) 27 repeat stretch;
}
.border-image-stretch{
background-color: #6bb2ff;
width:150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(images/border.jpg) 27 stretch stretch;
-moz-border-image: url( images/border.jpg) 27 stretch stretch;
-o-border-image: url( images/border.jpg) 27 stretch stretch;
-ms-border-image: url( images/border.jpg) 27 stretch stretch;
}
</style>
</head>
<body>
<div class="border-image"></div>
<div class="border-image-repeat"></div>
<div class="border-image-stretch"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.border-image{
background-color: #6bb2ff;
width:150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(images/border.jpg) 27 stretch round ;
-moz-border-image: url( images/border.jpg) 27 stretch round ;
-o-border-image: url( images/border.jpg) 27 stretch round ;
-ms-border-image: url( images/border.jpg) 27 stretch round ;
}
.border-image-repeat{
background-color: #6bb2ff;
width:150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(images/border.jpg) 27 stretch repeat;
-moz-border-image: url( images/border.jpg) 27 stretch repeat;
-o-border-image: url( images/border.jpg) 27 stretch repeat;
-ms-border-image: url( images/border.jpg) 27 stretch repeat;
}
</style>
</head>
<body>
<div class="border-image"></div>
<div class="border-image-repeat"></div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
