我正在使用cs3pie并面临一些问题。它工作但不是边界半径160而是4。我该如何解决呢。
/* Buttons and button links */
input[type=submit],
.actions ul li a,
.actions a {
font-weight:normal;
padding: 4px 8px;
background: #FDC00D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FDC00D), to(#F68C1E));
background-image: -webkit-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -moz-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -ms-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -o-linear-gradient(top, #FDC00D, #F68C1E);
background-image: linear-gradient(top, #FDC00D, #F68C1E);
-pie-background: linear-gradient(#FDC00D, #F68C1E); /*PIE*/
color:#333;
border:1px solid #F69C1E;
text-decoration: none;
text-shadow: #ccc 0px 1px 0px;
min-width: 0;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
user-select: none;
}
.actions ul li a:hover,
.actions a:hover {
background: #FDC00D;
border-color: #acacac;
text-decoration: none;
}
input[type=submit]:active,
.actions ul li a:active,
.actions a:active {
background: #F68C1E;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F68C1E), to(#FDC00D));
background-image: -webkit-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -moz-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -ms-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -o-linear-gradient(top, #F68C1E,#FDC00D);
background-image: linear-gradient(top, #F68C1E,#FDC00D);
-pie-background: linear-gradient(#F68C1E,#FDC00D); /*PIE*/
text-decoration: none;
}
input[type=submit],.actions a {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position:relative;
z-index: 0;
}
/** Actions **/
.actions ul {
margin: 0;
padding: 0;
}
.actions li {
margin:0 0 0.5em 0;
list-style-type: none;
white-space: nowrap;
padding: 0;
}
.actions ul li a {
display: block;
clear: both;
-webkit-border-top-right-radius: 161px;
-webkit-border-bottom-right-radius: 161px;
-moz-border-radius-topright: 161px;
-moz-border-radius-bottomright: 161px;
border-top-right-radius: 161px;
border-bottom-right-radius: 161px;
position:relative;
z-index: 0;
}
.actions ul li a:before,.actions ul li a.highlight:hover:before {
content: "\2665" ;
font-size: 18px;
padding-right:3px;
color: #16224C;
}
.actions ul li a.highlight:before,.actions ul li a:hover:before {
color: red;
}
.actions ul.subcategory{
margin-left:10px;
display: none;
}
.actions ul.subcategory li a {}
这就是我使用派的方式
<script>
$(function() {
if (window.PIE) {
$('.actions ul li a, .actions a, input[type="submit"], .success,.message,.cake-error,p.error,.error-message').each(function() {
PIE.attach(this);
});
}
});
</script>
答案 0 :(得分:1)
CSS3PIE仅支持简写符号。
摘自http://css3pie.com/documentation/known-issues/#shorthand
对于PIE解析的所有CSS属性,只有速记版本 这些财产将被承认。例如,虽然 支持border-radius,个人手写 border-top-left-radius等属性不是。
原因与URL相对解析的原因相同 到CSS文件(见上文):PIE没有可见的地方 每个风格的属性来自。如果既有速记又有 目前的手写属性,PIE无法确定其中的顺序 CSS作者指定了那些属性,也无法确定 选择器对每个属性的特异性。因此不能 关于哪个属性应该优先做出明智的决定。
为了避免做出愚蠢的猜测,我们选择只支持速记 属性。选择速记来保持文件大小 并避免繁琐的重复。
答案 1 :(得分:0)
这对于优化CSS并不是真正需要的,但理论上按字母顺序排序的属性对于解析器来说更相似。除非您想进行一些更改,否则您将更快找到您正在寻找的财产。
在编写RGB颜色时也要保持一致,因为其中一些是大写的,而另一些则不是。
而不是input[type=submit]
使用input[type="submit"]
作为规范说明。