设计给这样的稿子不是折腾人嘛...哎，没办法，作为一个负责任的打工仔，我是不会简单粗暴的直接切图的。嗯。能用CSS画边框，就不用图片。 ...

通过CSS3的linear-gradient实现的 ...

常规的 border-image 属性如果直接使用 border-radius 会无效，关于如何实现渐变边框圆角，网上流传着大概这么几种办法： 渐变背景方式（仅适用于纯底色背景） 借助 after 伪类（仅适用于纯底色背景） 借助 css3 中的 mask 遮罩蒙版 加 after ...

半透明边框 实现效果： 实现代码： 实现要点： 设置边框为半透明，这是还看不到半透明边框，因为默认情况下，背景会延伸到边框所在的区域下层，也就是背景是被边框的外沿框裁切掉。 通过设置 background-clip: padding-box （初始值 ...

css3边框阴影效果box-shadow用法详解 案例演示如下： 其中前2个值的用法跟对背景图片进行定位时的用法差不多。 将/zz/前的那句代码替换为：box-shadow:0px 0px 30px 10px #abcdef; 效果图如下： 前4个属性均可设置为负值。 ...

*首先要清楚的是，box-shadow的形状会随着border-radius变化。下面的例子可以证明： 效果： *而实现内圆角边框（外边框为直角）就可利用以上特性（box-shaodw填充outline和border之间的空白），代码如下： div1 效果 ...

　　今天和大家分享一个利用CSS3的animation属性完成的一个边框动画效果。大家都知道，CSS3给我们提供了@keyframes关键字，能让我们在网页中轻松插入动画。一个简单的动画插入，结构如下： 　　效果如下： 　　除了用from to 这种形式之外，我们还可 ...

box-shadow:0 1px 0 rgba(0,0,0,.2) inset,0 -1px 0 rgba(255,255,255,.2) inset; 　　 ...