채택완료

#hd 보더칼라를 무지개색깔로 바꾸고 싶습니다

2017-07-08 (토) 22:54:20 2,216

791d61d487d547e3fefa6523dd3ea23e_1499521731_1225.png
 

현재 sir로 예시를 든다면

hd border-bottom칼라가 들어갔듯이 

저는 그냥 회색인데

무지개 색깔로 바꾸고 싶거든요,,

그래서 

https://stackoverflow.com/questions/40557461/rainbow-gradient-in-css 

이 방법처럼

#grad1 {

    height: 2px;

  background: red; /* For browsers that do not support gradients */

    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */

    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */

    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */

    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */

}

이걸 적용해야되서

보더칼라로는 적용이 안되는것 같아

hd border-bottom 은 없애버리고 

hd가 끝나는 부분에다가 

div를 줘서 height를 2px로 해서 적용을 했는데

sir min-width 가 1050px 이듯이

전 1070px인데

1070px 이후부터 정상적으로 나오고 

그보다 작은 가로사이즈 비율에서는

무지개 가로길이가 짧아집니다 

791d61d487d547e3fefa6523dd3ea23e_1499522006_9731.png
 

바디 부분 클릭했을때의 

저 파랑색 차지하는 부분만큼만 길이가 나오고요

1070이상일때부터 쫙다 정상적으로 나오는데

div로 하려면 어떻게 해야될지 도움좀 부탁드립니다

아무리 해도 안되네요 ...

아님 div를 안넣고 

border-bottom 칼라를 저렇게 바꿀수는 없을까요?

|

답변 2개 / 댓글 1개

채택된 답변
+20 포인트
2017-07-08 (토) 23:24:20

hd border-bottom 은 0 프로 하시던지 칼라 지우시고


<div id="hd"> ,,,, </div>


이 다음에


<div id="grad1"></div>


게 하시고 스타일을


#grad1 {

z-index:4;

position:relative;

min-width:1070px;

height: 2px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */

}


게 하면 됩니다.

답변에 대한 댓글 1개

감사합니다
2017-07-25 (화) 15:51:32

#grad1 {

z-index:4;

position:relative;

min-width:1070px;

height: 2px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */

}

답변을 작성하려면 로그인이 필요합니다.