>  기사  >  웹 프론트엔드  >  CSS의 테두리 속성에 대한 자세한 소개

CSS의 테두리 속성에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-19 14:30:242331검색

border의 속성

1. border-width: 백분율을 지원하지 않음, 키워드 지원, 얇음(1px), 중간(기본값, 3px, 기본값이 3px인 이유는 border-style은 테두리가 3px 이상인 경우에만 유효하기 때문입니다. 다음은 다양한 값의 적용을 분석합니다. > 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><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</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. 배경 이미지는 위치 지정 시 테두리를 계산하지 않으므로 테두리를 사용하여 배경 이미지의 위치를 ​​지정합니다.

동일한 높이 레이아웃을 얻으려면 테두리를 사용하세요. 백분율 너비를 지원하지 않습니다

(4와 5는 비슷합니다. 둘 다 테두리를 사용하여 특정 면과의 거리를 고정합니다)

위 내용은 CSS의 테두리 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.