CSS에서 그래디언트
5078 단어 CSS
실행 예
그래디언트는 CSS(Cassion 3)에서만 사용할 수 있습니다.
코드는 다음과 같습니다.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.bg-grad
{
width: 400px;
height: 150px;
padding: 25px;
border: 5px solid #000000;
background: #000099;
/* Webkit系 */
background: -webkit-gradient(linear, left top, left bottom, from(#ccccff), to(#000066));
/* Mozilla系 */
background: -moz-linear-gradient(top, #ccccff, #000066);
/* IE10+ */
background: -ms-linear-gradient(top, #ccccff, #000066);
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0)";
/* IE5.5-7 */
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0); */
}
</style>
</head>
<body>
<p class="bg-grad">グラデーション</p>
</body>
</html>
해설
브라우저에 따라 지정 방법도 다릅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.bg-grad
{
width: 400px;
height: 150px;
padding: 25px;
border: 5px solid #000000;
background: #000099;
/* Webkit系 */
background: -webkit-gradient(linear, left top, left bottom, from(#ccccff), to(#000066));
/* Mozilla系 */
background: -moz-linear-gradient(top, #ccccff, #000066);
/* IE10+ */
background: -ms-linear-gradient(top, #ccccff, #000066);
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0)";
/* IE5.5-7 */
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0); */
}
</style>
</head>
<body>
<p class="bg-grad">グラデーション</p>
</body>
</html>
브라우저에 따라 지정 방법도 다릅니다.
background: -ms-linear-gradient ...-ms-filter: "progid:DXImageTransform ...filter: progid:DXImageTransform ..."그럼 Filter만 지정하면 되지 않나요?"그러나 Filter: CSS의 정확한 격식
属性:値;에 따라 콜럼버스가 두 번 나타난다.따라서 블라우스에 따라 몸매 파괴 위험이 있으므로 사용하지 않는 것이 좋다.ms-filter: 방면이 더블 인덱스로 둘러싸인 형식으로 개선되었기 때문에 문제가 없습니다.그나저나 왼쪽에서 오른쪽으로 그라데이션이 이런 느낌이에요.
/* Webkit系 */
background: -webkit-gradient(linear, left top, right top, from(#ccccff), to(#000066));
/* Mozilla系 */
background: -moz-linear-gradient(left, #ccccff, #000066);
/* IE10+ */
background: -ms-linear-gradient(left, #ccccff, #000066);
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=1)";
/* IE5.5-7 */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=1);
참조 링크
이미지를 사용하지 않고 CSS를 사용하여 그래디언트!!(IE 해당)
http://infinityforest.net/home/archives/830
밀리초 필터는 무의미하다
http://sayurin.blogspot.jp/2012/12/ms-filter.html
Reference
이 문제에 관하여(CSS에서 그래디언트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yasumodev/items/9ccac31860c31ce24a13
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(CSS에서 그래디언트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yasumodev/items/9ccac31860c31ce24a13텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
