Tidesdk 不工作 CSS答案

【问题标题】：Tidesdk doesn't work CSSTidesdk 不工作 CSS
【发布时间】：2014-01-11 00:50:00
【问题描述】：

我不能在潮汐dk 中用 css 做一些事情

我尝试做一个 css circles，我正在使用 1.3.1-beta，但它不起作用，我不知道我做错了什么。

你能帮帮我吗？

<html>
    <head>
        <title>Sample</title>
        <link href="style.css" type="text/css" rel="stylesheet" media="screen" />
    </head>
    <body>

        <div id="advanced" class="circle"></div>

    </body>

</html>

我用这个

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}

#advanced {
width: 200px;
height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}

我在 chrome 和这个工作中使用了这个，但在潮汐dk 应用程序中没有使用

编辑：

我发现了这个老方法做模糊，它不是常规的，但它看起来像 TideSDK 不接受 css3 =(

HTML：

<div id="container">
<div />
<div class="blur" />
</div>

CSS：

#container{ overflow: hidden; position: relative; width: 200px;
height: 200px;}
#container div{ 
  position: absolute; 
 left: 0; 
  top: 0; 
 z-index: 0; 
  width: 200px;
height: 200px;
border-radius: 40px;
background: orange;
}
#container div.blur:hover{opacity: 0.6; background: white;}
#container div.blur{opacity: 0; }

【问题讨论】：

标签： css tidesdk

【解决方案1】：

tideSDK 似乎在百分比边界半径和新的渐变语法-webkit-radial-gradient 方面存在问题。我建议您对渐变使用旧语法。您可以在下面找到工作代码示例。根据需要修改颜色和颜色位置。

.circle {
    -webkit-border-radius: 100px;
    display: inline-block;
    margin-right: 20px;
}

#advanced {
    width: 200px;
    height: 200px;
    background: -webkit-gradient(radial, 40% 40%, 20, 50% 50%, 250, from(yellow), to(red));
}

有关-webkit-gradient 语法的更多信息，请阅读this article。

【讨论】：

你是对的，有些方法不能正常工作，但这个示例在 titasdk 应用程序上工作没有问题。