这是在非关键设计元素上实施CSS3的小额承诺,我认为它可能有助于其他前端开发人员说服老板,免费使用它!从我的角度来看,您需要了解的是,CSS3可以帮助节省大量时间到您的Web开发团队,这篇文章讨论了这些新标签以及它如何节省时间和挫折。

模态框中的CSS3

Box-Shadow和边界半径是Internet Explorer旁边的每个主要Web浏览器中实现的新CSS3标签,它使开发人员能够在Div Elements周围创建简单的阴影和圆角。通常在Lightbox或Modal Box周围发现了薄膜。
考虑到客户端的模态框和这种图形元素通常不呈现给客户端,我建议使用这种技术在旧图像技术上,因为这一切都有。

使用Box-Shable可以简单地创建CSS边框,平均需要30秒。这使得可以轻松地改变盒子的强度,颜色和背景颜色。使用传统技术,您必须重新创建所有图像(并找到PSD文件)。

这会随着时间的推移缓解网站管理,这只是6行的CSS。如果将其与旧技术进行比较,更改模态框涉及长期处理,并且开发人员也可能会忘记细节,如PNG修复。有突破网站的风险。

另一个优点,它将更快地加载,没有涉及的图像或javascript,阴影将立即呈现包裹的div。

但是让我们’看看创造阴影的典型方式,以及它涉及什么:

8 PNG,4个圆角,4个酒吧
JavaScript图像预加载器如果您希望将模态窗口轻轻加载。
模态窗口周围的div或表格的群集和一个很好的CSS块
IE6的PNGFIX
调试每个浏览器,昂贵的开发。

而另一种方式

box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
-moz-box-shadow: 0px 0px 6px #000000;
 
border-radius: 5px;
-webkit-border-radius:  5px;
-moz-border-radius:  5px;

简单来说:

优点:
更容易维护
生产成本几乎不存在,更容易植入
加载速度更快
建立未来

缺点:
Internet Explorer用户不会看到这些效果
不是像素完美的模板

15 thoughts on “如何:获取CSS3盒子阴影和边界半径被接受为您的工作场所的可行选项

  1. 感谢您发布您的Pro / Con Argument。

    在优势下,您可能希望纠正此行,如下所示:

    生产成本几乎不存在,更易于实施

  2. 当使用IE黑客时,我总是有点担忧
    progid:dximagetransform.microsoft.shadow(color =#Eeeeee,方向= 0,强度= 7)

    结果真的不如盒子影子

    但是,如果您可以产生良好的影子,它可能有所帮助。

  3. 如果只想要圆角,我宁愿使用jQuery来实现效果。有一个插件,可以易于使用“Corner”你可以在这里得到它:

    http://www.malsup.com/jquery/corner/

    它甚至适用于IE 6+,这就是我将使用它的原因。只有大约10%的互联网用户关闭了JavaScript(它不起作用的人)对抗使用IE的用户的更大部分。因此它将在更广泛的受众中工作。

    然后Agai,如果Crapbrowser IE不存在(谢谢Microsoft持有Web),我就不会写这个。

    您应该访问我的网站: http://designbank.se

    1. 我也使用该插件,但它可以’T应对盒子阴影,有时错误地猜测角色颜色,特别是在梯度上

      我的代码最终看起来像
      if($ support.borderradius)
      {$(‘.selector’).corner(); }
      别的
      {$(‘.selector’).corner(‘top cc:#553300’).corner(‘bottom cc:#004488’); }

  4. 正确的响应当然是在较新的浏览器中看起来很好的效果,同时在IE中可接受地降级。

评论被关闭。