border-image-width in css

이것은 MDN이 border-image-width을 설명하는 방법입니다.border-image-width in css

border-image-width CSS 속성은 경계 테두리의 안쪽 오프셋을 정의하여 테두리 이미지의 너비를 정의합니다. border-image-width가 border-width보다 큰 경우 테두리 이미지가 패딩 (및/또는 내용) 가장자리를 넘어 확장됩니다.

border-image-width가 border-width보다 작 으면 어떻게 될지 알려지지 않습니다.

예를 들어 보았습니다. 이미지 사용

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border Image</title> 
    <style> 
     p.checkBorderImageWidth{ 
      border: 40px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 10px; 
      outline: 1px solid black; 
     } 

    </style> 
</head> 

<body> 
    <p class="checkBorderImageWidth">Hi this is just a demo</p> 
</body> 

</html>

국경은 다음과 같습니다 :

결과는 다음과 같습니다

그래서, 당신을 참조로 크롬 여기에 (56)에 그것을 실행 코드입니다 단색 검정 테두리는 40px 및 boder-image-width가 10px이지만 숨겨집니다. 아무도 그것을 설명 할 수 있습니까?

출처

2017-02-16 Breaking Benjamin

테두리 이미지 대신 '일반'국경의 사용 :

소스 :

border-image 속성은 이미지를 지정할 수 있습니다 https://www.w3schools.com/cssref/css3_pr_border-image.asp 주위 대신 정상적인 경계의를 사용하는 요소.

border-image-width > border-width 인 경우 테두리 이미지가 패딩을 포함하고 결국 컨테이너의 내용을 다룰 것이라고 설명합니다. 예를 들어

:
: 여기

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border Image</title> <style> p.checkBorderImageWidth{ border: 40px solid black; width:500px; border-image-source: url("1.png"); /* Note that now border-image-slice defaults to 100% */ border-image-width: 10px; outline: 1px solid black; } p.checkBorderImageWidth2{ border: 100px solid black; width:500px; border-image-source: url("1.png"); /* Note that now border-image-slice defaults to 100% */ border-image-width: 30px; padding: 5px; outline: 1px solid black; } </style> </head> <body> <p class="checkBorderImageWidth">Hi this is just a demo</p> <p class="checkBorderImageWidth2">The border covers the text.</p> </body> </html>

은 테두리가 텍스트를 포함

출처

2017-02-16 14:43:05 Sylvain

border-image-width in css

답변

관련 문제