box-shadow

CSS3绘制8种超炫的加载动画 逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。 这些加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想不到的效果。 1.上下起伏波动的加载动画： #loader1, #loader1:before, #loader1:after { background: #f2fa08; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } #loader1:before, #loader1:after { position: absolute; top: 0; content: ''; } #loader1:before { left: -1.5em; } #loader1 { text-indent: -9999em; margin: 50px 50px; position: relative; float: left; font-size: 11px; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; }

CSS3 Borders 用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。 在本章中，您将了解以下的边框属性： border-radius box-shadow border-image 浏览器支持 Internet Explorer 9+ 支持 border-radius 和 box-shadow. Firefox, Chrome, 和 Safari 支持所有最新的 border 属性. 注意： 前缀是-webkit-的Safari支持阴影边框。 前缀是-o-的Opera支持边框图像。 CSS3 圆角 在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在CSS3中，很容易创建圆角。 在CSS3中border-radius属性被用于创建圆角： 这是圆角边框！ div { border:2px solid; border-radius:25px; } CSS3盒阴影 CSS3中的box-shadow属性被用来添加阴影: div { box-shadow: 10px 10px 5px #888888; } CSS3边界图片 有了CSS3的border-image属性，你可以使用图像创建一个边框： border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像： 在div中使用图片创建边框:

一、前面的感慨 以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。 下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition效果，IE6,IE7,IE8浏览器可以回家过元旦节了，这里没有它们的事情，Firefox3虽然平时表现不错，这里也没有它的事情。这个效果最拿手的是chrome2浏览器，Safari4，也就是webkit家族，这里Firefox3.5勉强凑合，有盒阴影和旋转效果，但是没有动画。所以，下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器，部分适用于Firefox3.5+，IE纯粹的观众。 二、基础练习 – 实现旋转与盒投影效果 在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。 -webkit-transform:rotate(10deg); -moz-transform

border-radius属性: 定义: 为元素添加圆角边框; 语法: border-radius: 1-4 length|% / 1-4 length|%; JavaScript语法: object.style.borderRadius="5px"; 详细: border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性; 示例: div { border:2px solid; border-radius:25px; } 注释：按此顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。 值 描述 length 定义圆角的形状 % 以百分比定义圆角的形状 box-shadow属性: 定义: 给边框添加一个或多个阴影 语法: box-shadow: h-shadow v-shadow blur spread color inset; JavaScript语法: object.style.boxShadow="10px 10px 5px #888888" 详细: 示例: div { box-shadow: 10px 10px 5px #888888; } 值 描述 h

I know about the box-shadow property in CSS, but this produces a shadow that looks like being projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this: This is what I have so far: div { display: inline-block; height: 150px; width: 150px; background: url(//placehold.it/150x150); margin-left: 20px; box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75); } <div></div> <div></div> You can achieve this without using the box-shadow property on the element itself, but on the pseudo element ::before . transform: skewX(60deg); will