带回退功能的 CSS3 小技巧

CSS3 可以实现一些非常棒的功能。看看 WebKit 中可以实现的一些 疯狂的 3D 效果。但是众所周知，我们需要谨慎选择使用哪些功能。最前沿的技术很有趣，但由于只有极少数浏览器完全支持它们，因此我们只能在它们可以回退到其他完全可接受的样式的情况下使用它们。让我们来看几个快速、简单、简单的例子。

 

增长链接

使用 CSS3 缩放元素非常有趣且容易。我们不需要 CSS3 来做到这一点，我们可以使用相对定位，偏移位置，增加宽度、高度和字体大小。但是哇，当我们只需要应用一个缩放因子并完成它时，这真是太麻烦了。这些链接在悬停时也会使其角更圆润并应用一些阴影。

.grower { 
    display: block;
    margin: 0 auto;
    width: 120px;
    padding: 2px 5px;
    border: 1px solid #2f2626;
    
    background: rgba(237,95,0,0.3); 
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.grower:hover { 
    background: rgba(237,95,0,1.0);
    border-color: rgba(237,95,0,1.0);

    -moz-transform: scale(1.2); 
    -webkit-transform: scale(1.2); 
    
    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}

 

模糊边缘

使用多个阴影在略微透明的文本后面可以模糊文本的边缘，而无需任何图像。过渡可以淡出文本，跟踪出字母，并更改字体大小。

h3 { 
    height: 100px;
    font: bold 80px Helvetica, Sans-Serif;
    
    color: black; /* fallback */
    color: rgba(0,0,0,0.2);
    
    text-shadow: 
        0 0 2px rgba(0,0,0,0.2),
        0 0 4px rgba(0,0,0,0.2), 
        0 0 6px rgba(0,0,0,0.2); 
    -webkit-transition: all 0.2s linear;
}
h3:hover { 
    color: rgba(28, 28, 28, 0.2); 
    opacity: 0.8;
    letter-spacing: 15px; 
    font-size: 70px;
}

 

椭圆形圆角

渐进增强最典型的例子就是 border-radius。但您是否知道不必创建完美的圆形圆角？我们将在此处创建一个椭圆，并为了好玩使其旋转（仅限 WebKit… Mozilla 有过渡的语法，但尚未实现）。

.oval { 
    background: #fe4902; 
    width: 200px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center;
    margin: 0 auto;
    
    /* Notice the slightly different syntax */
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px 50px;
    
    -webkit-transition: all 0.8s linear;
    -moz-transition: all 0.8s linear;  /* non functional just yet */
}
.oval:hover {
    -webkit-transform: rotate(720deg);
}

 

多个背景

如果得到更广泛的支持，多个背景将是惊人的省时工具。唉，我们现在只能将它们用于可选的细微增强，在这些增强中，完全没有回退是可以接受的。

body {
    background: 
        url(../images/top-right.png) top right fixed no-repeat, 
        url(../images/top-left.png) top left fixed no-repeat, 
        url(../images/bot-left.png) bottom left fixed no-repeat, 
        url(../images/bot-right.png) bottom right fixed no-repeat;
    background-color: #2f2626;
}

 

查看演示   下载文件