CSS3圆角带阴影效果代码

作者：袖梨 2022-06-25

当涉及到设计的关键就是做最少的事情，完成更多的任务，太多的网页看起来很杂乱，有点像刚开始的网页设计。幸运的是，web开发人员可以使用css3给网页添加一些惊奇的效果，让他们开起来更自然一些。

下面的代码就是展示了使用CSS3让一个元素看起来像是缝合到网页中一样。

代码如下

复制代码

.stitched {
    height:100px;
    width:500px;
    padding: 5px 10px 5px 10px;
    margin: 15px;
    background: #e2e2e2;
    border: 2px dashed rgba(255,255,255,0.4);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
}

你第一点击上面的链接去看看这个效果。

再补充一个例子

代码如下

复制代码

CSS3实现的立体按钮

Hello OSTools

一聚教程网