[css] 그라디언트 테두리

테두리에 그라디언트를 적용하려고 하는데이 작업이 간단하다고 생각했습니다.

border-color: -moz-linear-gradient(top, #555555, #111111);

그러나 이것은 작동하지 않습니다.

테두리 그라디언트를 수행하는 올바른 방법이 무엇인지 아는 사람이 있습니까?



답변

이제 WebKit (및 Chrome 12 이상)은 그라디언트를 테두리 이미지로 지원합니다.

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink- http
: //www.webkit.org/blog/1424/css3-gradients/ 브라우저 지원 : http://caniuse.com/#search=border-image


답변

테두리 대신 배경 그라데이션과 패딩을 사용합니다. 같은 모양이지만 훨씬 더 쉽고 더 많이 지원됩니다.

간단한 예 :

.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.g > div { background: #fff; }
<div class="g">
	<div>bla</div>
</div>


편집 : :before@WalterSchwarz가 지적한 것처럼 선택기를 활용할 수도 있습니다 .

body {
    padding: 20px;
}
.circle {
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
    border-radius: 100%;
    position: relative;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.circle::before {
    border-radius: 100%;
    content: '';
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    padding: 10px;
    width: 100%;
    height:100%;
    top: -10px;
    left: -10px;
    position:absolute;
    z-index:-1;
}
<div class="circle">Test</div>


답변

border-image-slice CSS 테두리 이미지 그라디언트를 확장합니다

이것은 (내가 이해하는 것처럼) “이미지”가 섹션으로 기본 슬라이스되는 것을 방지합니다. 테두리가 없으면 테두리가 한쪽에만 있고 전체 요소 주위에 있으면 작은 구배가 각 모서리에 나타납니다.

  border-bottom: 6px solid transparent;
  border-image: linear-gradient(to right, red , yellow);
  border-image-slice: 1;


답변

Mozilla는 현재 속기 배경뿐만 아니라 background-image 속성 값으로 CSS 그라디언트 만 지원합니다.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

http://www.cssportal.com/css3-preview/borders.htm


답변

이것을 시도하십시오, 웹 키트에서 잘 작동합니다

.border {
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image:
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}
<div class="border">Hello!</div>


답변

그것은 해킹이지만 배경 이미지를 사용하여 그라디언트를 지정한 다음 상자 그림자로 실제 배경을 마스킹 하여이 효과를 얻을 수 있습니다. 예를 들면 다음과 같습니다.

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

보낸 사람 : http://blog.nateps.com/the-elusive-css-border-gradient


답변

이것을 시도하십시오, 그것은 나를 위해 일했습니다.

div{
  border-radius: 20px;
  height: 70vh;
  overflow: hidden;
}

div::before{
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}
<div></div>

링크는 바이올린
https://jsfiddle.net/yash009/kayjqve3/1/에 있습니다. 이것이 도움이되기를 바랍니다.