>  기사  >  웹 프론트엔드  >  CSS의 테두리 속성 특성 소개

CSS의 테두리 속성 특성 소개

不言
不言원래의
2018-08-21 11:41:092206검색

이 글에서는 CSS의 테두리 속성에 대한 소개를 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

약어순: width-style-color

eg: p{border:1px solid red;}

각 속성의 특징을 약어순으로 소개:

1 border-width:medium (기본값. Medium) ) :thin;thick;thick;length;inherit;

2. border-style: none (기본값. 없음); Hidden (테두리 충돌을 해결하는 데 사용되는 테이블에 적용되는 경우를 제외하고는 없음과 동일); 점선), 실선(실선), 홈(3D 홈), 삽입(3D 돌출),

3. border-color(name, 16진수, rgb); transparent:inherit.

4. border-radius:0 (기본값);

값을 지정할 수도 있습니다. 별도로: border-top-left-radius; border-bottom-left-radius;

5. border-image: 소스 슬라이스 너비 시작 반복; 값은 기본값입니다 ​​

예:

div{
    border-image:url(img.png) 30 30 round;
    -webkit-border-image:url(img.png) 30 30 round;/*safari 5 and older*/
    -o-border-image:url(img.png) 30 30 round;/*Opera*/
}

6. box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2)

0.2는 투명도를 나타냅니다.

참고: ie9+는 border-radius 및 box를 지원합니다. -shadow 속성;firefox, chrome, Opera 및 safafi는 모든 새로운 테두리 속성을 지원합니다(예: border-radius, border-image 및 box-shadow). border-image의 경우 safari5 및 이전 버전에는 접두사 -webkit-이 필요하며, Opera에는 접두사 - o-;

관련 권장 사항:

css의 border-collapse_html/css_WEB-ITnose 정보

CSS border-left-color attribute_html/css_WEB-ITnose

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

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