묻고답하기
XE 적용되지 않는 css3?
2015.01.15 23:12
http://lifeto.cafe24.com/xe/today
위 페이지에서 아쿠아 버튼을 만들기 위해서 다음과같이 css3를 입력했습니다.
.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;
/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
그런데, 보시다시피 페이지에서는 제대로 완성되지 않았네요.
border-radius 같은 경우는 아예 적용이 되지 않았구요.
가끔, 이런식으로 스타일을 입력했으나 xe에서 무시되는 경우가 생깁니다.
이것은 무슨 문제인가요?
무시된건 아니고 border-radius는 소스에 없네요. 웹킷과 모질라 전용 border-radius만 있으니 익스에서는 보이지 않고요. 익스에서도 보이게 할려면 border-radius 추가해주세요.