css设置下边框边框阴影_跨浏览器CSS框阴影

css设置下边框边框阴影

Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we aren't good with graphic creation, however, doesn't mean that our clients wont effects like box shadows.  Once such project recently popped up for me, so I sought a cross browser compatible solution for programmatic box shadows.  Here's my solution.

盒子阴影已经在网络上使用了很长一段时间，但是并不是使用CSS来创建的-我们需要利用一些Photoshop游戏来创建它们。 对于没有设计才能的人(又名我)，需要使用Photoshop。 但是，仅仅因为我们不擅长图形创建，并不意味着我们的客户不会像盒子阴影那样产生效果。 一旦最近出现了这样的项目，我便寻求了针对程序盒阴影的跨浏览器兼容解决方案。 这是我的解决方案。

View Demo 观看演示

CSS (The CSS)

As you can probably imagine, Internet Explorer is the odd duck when it comes to accomplishing CSS box shadows.  The other browsers stick to a more unified syntax:

您可能会想到，对于完成CSS框阴影，Internet Explorer实在是太奇怪了。 其他浏览器坚持使用更统一的语法：

div.shadow {
	-moz-box-shadow: 3px 3px 4px #444;
	-webkit-box-shadow: 3px 3px 4px #444;
	box-shadow: 3px 3px 4px #444;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}

There are four main pieces to the -box-shadow property: offset-x offset-y, blur-radius, spread-radius, and color.  Internet Explorer's syntax is a bit uglier and less configurable, but allows for CSS-based box shadows nonetheless.  If you specify the inset keyword at the beginning of the box-shadow value, the box shadow will appear inside the element!

-box-shadow属性有四个主要部分： offset-x offset-y ， blur-radius ， spread-radius和color 。 Internet Explorer的语法有点丑陋，而且配置较差，但尽管如此，它仍允许基于CSS的盒子阴影。 如果在box-shadow值的开头指定inset关键字，则box shadow将出现在元素中！

View Demo 观看演示

Like border-radius, gradients, transformations, and a variety of other relatively new CSS properties, advancements in CSS are helping Photoshop-inept developers like myself to create programmatic art.  I do have to admit that box shadows are nice and can provide a small layer of depth.

像border-radius ， gradients ， transforms以及其他各种相对较新CSS属性一样，CSS的进步正在帮助像我这样不擅长Photoshop的开发人员创建程序艺术。 我必须承认框阴影很好，并且可以提供一小层深度。

翻译自: https://davidwalsh.name/css-box-shadow

css设置下边框边框阴影