Html&CSS&Script 배경이미지를 그라데이션화교 주기 linear-gradient

페이지 정보

작성자 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 2,052회 작성일 13-04-25 11:30

본문

<style type="text/css">
ul{list-style:none;}
ul li{float:left; width:33%; text-align:center; border:1px solid white; color:white; font-weight:bold;}
div {
padding:5px 0px;
/*위에서 아래로*/
 background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);          /* chrome, safari */
 background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);          /* ff */
 background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);          /* ie10 */
 background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);     /*opera */
 background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);  /* ie9 이하 버전 */
}
/*
왼쪽 아래에서 오른쪽 위로.. 45도
background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
상단 FF5A00 , 하단 FFAE00
background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
위에서부터 아래로 무지개 색상 균등하게
background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
*/
</style>
 
 

<ul>
     <li><div>5분자유발언</div></li>
     <li><div>도정질문</div></li>
     <li><div>의정활동사진</div></li>
</ul>

답변목록

등록된 답변이 없습니다.

Total 0건 1 페이지
게시물 검색
번호 제목 글쓴이 조회 날짜
게시물이 없습니다.