테두리에 대한 CSS 심층 이해
- 迷茫원래의
- 2017-03-25 10:28:471372검색
테두리 속성
1.border-width: 백분율 지원 안 함, 키워드 지원, 얇음(1px), 중간(기본값, 3px, 기본값이 3px인 이유는 테두리가 있는 경우에만 해당) 3px 이상이면 border-style이 유효합니다
Fruit), Thick(5px)
2. border-style: 값이 다르며, 다음 분석은 다른 값을 적용한 것입니다.
a.solid: 삼각형과 사다리꼴을 구현할 수 있음
<!DOCTYPE html><html><head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>b.dashed: 점선, 크롬/Firefox 브라우저에서 점선과 실선의 비율은 3:1( 얇음), IE 브라우저에서는 비율이 2:1(촘촘함)
c.dotted: 점선, Chrome/Firefox 브라우저에서는 사각형 점, IE 브라우저에서는 사각형 점, 점입니다(점을 사용하면 둥근 모서리 효과를 얻을 수 있습니다)
d.double: 이중 선, 계산 규칙, 이중 선 너비는 항상 동일하며 중간 간격 +-1, 예를 들어 3px=1( 내부) + 1(중간 간격) + 1((외부), 3바 패턴을 얻을 수 있습니다.
e.inset(삽입), outset(외부 볼록), ridge(홈): 오래된 스타일, 호환성 저하, 사용 시나리오 없음
3.border-color: in 색상을 지정할 때, 색상을 테두리 색상으로 사용하면 링크 색상이 변경될 때 CSS 스타일 코드를 단순화할 수 있습니다. 예:
<!DOCTYPE html><html><head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;/*
border:1px solid;*/
}
</style>
</head>
<body>
<p class="a">哈哈</p>
</body>
</html>4. 배경 이미지는 위치 지정 시 테두리를 계산하지 않으므로 테두리를 사용하여 배경 이미지를 배치합니다.
5. 동일 높이 레이아웃을 구현하면 백분율 너비를 지원하지 않는다는 단점이 있습니다
(4와 5는 비슷하며 둘 다 테두리를 사용하여 특정 면과의 거리를 고정합니다)
위 내용은 테두리에 대한 CSS 심층 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!