그라데이션 테두리
테두리에 그라데이션을 적용하려고 합니다. 이렇게 하는 것만큼 간단하다고 생각했습니다.
border-color: -moz-linear-gradient(top, #555555, #111111);
하지만 이것은 효과가 없습니다.
국경 경사도를 올바르게 수행하는 방법이 무엇인지 아는 사람이 있습니까?
그border-image자산이 이를 달성할 수 있습니다.다을지야합을 해야 할 것입니다.border-style그리고.border-width도 마찬가지야
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;
MDN에 대해 자세히 알아보십시오.
테두리 대신 배경 그라데이션과 패딩을 사용합니다. 동일한 모양이지만 훨씬 쉽고 지원됩니다.
간단한 예:
.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@Walter Schwarz가 지적했듯이 셀렉터는 다음과 같습니다.
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%);
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
position: absolute;
z-index:-1;
}<div class="circle"></div>border-image-sliceCSS 테두리-이미지 그라데이션을 확장합니다.
이렇게 하면 "이미지"가 기본적으로 섹션으로 분할되는 것을 방지할 수 있습니다. "이미지"가 없으면 테두리가 한쪽에만 있고 전체 요소 주위에 있으면 아무 것도 나타나지 않으며 각 모서리에 4개의 작은 그라데이션이 나타납니다.
body{
border: 16px solid transparent;
border-image: linear-gradient(45deg, red , yellow);
border-image-slice: 1;
height: 120px;
border-radius: 10px; /* will have no effect */
}Mozilla는 현재 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>background, background-clip 및 background-origin을 사용하여 테두리 반지름을 제거하지 않고도 이 작업을 수행할 수 있습니다.
<style>
.border-gradient-rounded {
/* Border */
border: 4px solid transparent;
border-radius: 20px;
background:
linear-gradient(to right, white, white),
linear-gradient(to right, red , blue);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
/* Other styles */
width: 100px;
height: 40px;
padding: 12px;
}
</style>
<div class="border-gradient-rounded">
Content
</div>기본적으로 흰색 배경을 그라데이션 배경 위에 배치하고 내부 테두리에서 흰색 배경을 클리핑하고 외부 테두리에서 그라데이션 배경을 클리핑합니다.를 따서경다음같정합이니로 .solid transparent.
이 dev.to 게시물에서 Method 2에 대한 크레딧.
해킹이지만 배경 이미지를 사용하여 그라데이션을 지정한 다음 상자 그림자로 실제 배경을 마스킹하면 이러한 효과를 얻을 수 있습니다.예:
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
다음 예제를 사용해 보십시오.
.border-gradient {
border-width: 5px 5px 5px 5px;
border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
border-image-slice: 9;
border-style: solid;
}
가장 간단한 방법은 테두리 이미지 속성을 사용하는 것입니다.원하는 선형 그라데이션 또는 반복 그라데이션을 사용할 수 있습니다.선형 그라데이션을 사용하려면 테두리 이미지 조각 속성이 1이어야 합니다.
.gradient-border {
border-style: solid;
border-width: 2px;
border-image: linear-gradient(45deg, red, blue) 1;
}
참고문헌 MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice 디지털 오션 - https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css
이것 좀 먹어봐요, 저한테 효과가 있었어요.
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/ 에 있습니다. 이것이 도움이 되기를 바랍니다.
Webkit는 테두리의 그라데이션을 지원하며 이제 Mozilla 형식의 그라데이션을 허용합니다.
Firefox는 두 가지 방법으로 그라데이션을 지원한다고 주장합니다.
IE9은 지원하지 않습니다.
저는 szajmon에 동의합니다.그와 Quentin의 답변에 대한 유일한 문제는 브라우저 간 호환성입니다.
HTML:
<div class="g">
<div>bla</div>
</div>
CSS:
.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}
.g > div { background: #fff; }
그라데이션 경계 예제
테두리 이미지 CSS 속성 사용
Mozilla의 테두리 이미지에 대한 크레딧
.grad-border {
height: 1px;
width: 85%;
margin: 0 auto;
display: flex;
}
.left-border, .right-border {
width: 50%;
border-bottom: 2px solid #695f52;
display: inline-block;
}
.left-border {
border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}<div class="grad-border">
<div class="left-border"></div>
<div class="right-border"></div>
</div>동일한 효과를 얻기 위한 또 다른 해킹은 IE9+, 새로운 Firefox 및 대부분의 WebKit 기반 브라우저(http://caniuse.com/ #background=멀티백그라운드)에서 지원되는 기능인 여러 배경 이미지를 활용하는 것입니다.
IE6-8에서 여러 배경을 사용하는 몇 가지 옵션도 있습니다. http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
예를 들어 파란색에서 흰색으로 선형 그라데이션인 5px 너비의 왼쪽 테두리를 원한다고 가정합니다.그라데이션을 이미지로 생성하고 PNG로 내보냅니다. 왼쪽 테두리 그라데이션 다음에 다른 CSS 배경을 나열합니다.
#상자 {}배경:url(/images/Box-left BorderGradient.png)은 반복하지 않고 남겼습니다....;}
의 배경 위치 부분을 변경하여 이 기법을 위쪽, 오른쪽 및 아래쪽 테두리 그라데이션에 적용할 수 있습니다.background속성
다음은 주어진 예에 대한 jsFiddle입니다. http://jsfiddle.net/jLnDt/
CSS-Tricks의 그라데이션 경계: http://css-tricks.com/examples/GradientBorder/
.multbg-top-to-bottom {
border-top: 3px solid black;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent);
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent);
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent);
-moz-background-size: 3px 100%;
background-size: 3px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
에는 그라데이션 경계를 사용하여 를 모방할 도 있습니다.:before또는:after유사 요소, 수행하려는 작업에 따라 달라집니다.
이 코드를 사용해 보세요.
.gradientBoxesWithOuterShadows {
height: 200px;
width: 400px;
padding: 20px;
background-color: white;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
또는 이 바이올린을 참조하십시오: http://jsfiddle.net/necolas/vqnk9/
여기 반쯤 아래쪽으로 희미하게 나타나는 그라데이션 경계를 갖는 멋진 세미 크로스 브라우저 방법이 있습니다.컬러 스톱을 다음으로 설정하면 됩니다.rgba(0, 0, 0, 0)
.fade-out-borders {
min-height: 200px; /* for example */
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}
<div class="fade-out-border"></div>
용도 설명:
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
더 많은 정보: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
테두리 반지름으로 작동하는 투명 배경이 있는 그라데이션 테두리입니다.
.gradient-border {
border-radius: 999px;
padding: 10px 3rem;
display: inline-block;
position: relative;
background: transparent;
border: none;
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
padding: 2px;
border-radius: 9999px;
background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
라이브 데모: https://jsfiddle.net/jbernier/0eypxc74/1/
하지만 그렇게 간결하지는 않지만 투명 배경과 둥근 모서리를 지원하는 이것을 시도해 보세요.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<mask id="cut-off-center">
<rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="white"/>
<rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="black"/>
</mask>
<linearGradient id="border">
<stop offset="0" stop-color="rgba(0, 164, 255, 1)"/>
<stop offset="1" stop-color="rgba(0, 127, 216, .47)"/>
</linearGradient>
<linearGradient id="background">
<stop offset="0" stop-color="#72C5FF"/>
<stop offset="1" stop-color="#0090FE"/>
</linearGradient>
</defs>
<rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="url(#border)" mask="url(#cut-off-center)"/>
<rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="url(#background)" fill-opacity="0.3"/>
</svg>또한 배경 이미지로 사용할 수 있습니다.
.box {
width: 78px;
height: 28px;
color: orange;
text-align: center;
line-height: 28px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiPgogICAgPGRlZnM+CiAgICAgICAgPG1hc2sgaWQ9ImN1dC1vZmYtY2VudGVyIj4KICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iNzgiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjEiIHk9IjEiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc2IiBoZWlnaHQ9IjI2IiBmaWxsPSJibGFjayIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJvcmRlciI+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiYSgwLCAxNjQsIDI1NSwgMSkiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2JhKDAsIDEyNywgMjE2LCAuNDcpIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJhY2tncm91bmQiPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3MkM1RkYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA5MEZFIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc4IiBoZWlnaHQ9IjI4IiBmaWxsPSJ1cmwoI2JvcmRlcikiIG1hc2s9InVybCgjY3V0LW9mZi1jZW50ZXIpIi8+CiAgICA8cmVjdCB4PSIxIiB5PSIxIiByeD0iMiIgcnk9IjIiIHdpZHRoPSI3NiIgaGVpZ2h0PSIyNiIgZmlsbD0idXJsKCNiYWNrZ3JvdW5kKSIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+')
}<div class="box">text</div>여기에 이것에 대한 멋진 CSS 트릭 기사가 있습니다: https://css-tricks.com/gradient-borders-in-css/ .
저는 여러 배경과 배경에서 유래한 속성을 사용하여 이에 대한 아주 단순하고 단일한 해결책을 생각해 낼 수 있었습니다.
.wrapper {
background: linear-gradient(#222, #222),
linear-gradient(to right, red, purple);
background-origin: padding-box, border-box;
background-repeat: no-repeat; /* this is important */
border: 5px solid transparent;
}
이 접근 방식의 좋은 점은 다음과 같습니다.
- z-index의 영향을 받지 않습니다.
- 투명 테두리의 폭만 변경해도 쉽게 확장 가능합니다.
확인해 보십시오. https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100
언급URL : https://stackoverflow.com/questions/2717127/gradient-borders
'source' 카테고리의 다른 글
| Docker 컨테이너에서 호스트로 파일 복사 (0) | 2023.08.12 |
|---|---|
| Powershell, xml을 화면으로 출력 (0) | 2023.08.12 |
| 호스트에서 도커 컨테이너로 파일을 복사하는 방법은 무엇입니까? (0) | 2023.08.12 |
| 문자열에서 특정 문자 잘라내기 (0) | 2023.08.12 |
| 이미지를 문서 디렉토리에 저장하고 전자 메일 첨부 파일을 검색하는 중 (0) | 2023.08.12 |