테두리에 그라디언트를 적용하려고 하는데이 작업이 간단하다고 생각했습니다.
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; 답변
이것을 시도하십시오, 웹 키트에서 잘 작동합니다
.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/에 있습니다. 이것이 도움이되기를 바랍니다.
