보더바텀 칼라변경 문의합니다
본문
제가 모바일에서
메뉴 부분 누를시 보더칼라를
무지개칼라로 바꾸고 싶은데요
무지개 칼라 아는것이
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
이것뿐이라서요
이건 백그라운드가 바뀌는거라서
보더바텀 칼라를 바꾸고 싶거든요
백그라운드로 넣어서
height를 2px로 만들었더니
그 얇은 2px만을 클릭해야되는 오류가 생기고
그렇게 하는것은 아닌것 같아서요
border-bottom: 2px solid 무지개색깔
백그라운드가 아닌 바텀칼라로 만들수 있을까요??
sir처럼 모바일상에서 메뉴부분 클릭했을때
해당 메뉴부분만 밑줄형태로 바뀌게 해놓은 상태인데요
저 부분을 어떻게 제가 원하는대로 할수있을까요?
답변 2
background 속성을 응용해 border-bottom 처럼 표현했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a.rainbow {
text-decoration: none;
}
a.rainbow:hover {
background-image: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
background-repeat: repeat-x;
background-size: 100% 2px;
background-position: left bottom;
}
</style>
</head>
<body>
<a class="rainbow" href="#">this is a link</a>
</body>
</html>
감사합니다^_^
천재셈 !! ============b
이런 방법은 미처 생각을....ㅎㅎ
border에 바로 그라디언트를 넣을 순 없구요.
div 요소를 하나 더 만들어서 height 2px 정도 주고 position:absolute 속성 줘서 따로 만들어주셔야 할 것 같네요.
https://homzzang.com/b/css-108 참고
더 자세한 건 전문가 님이 아래에 답변 주실 듯....
