html中css信封怎么表示,css3信封形状 -凯发k8官方网

我的尝试，我只使用了chrome的阴影和旋转属性，但你可以将它添加到其他浏览器，

body {

background: #f2f2f2;

}

#content {

width: 460px;

margin: 0 auto;

background: #fff;

height: 400px;

/* for demo */

-moz-box-shadow: 0 1px 5px #ccc;

-webkit-box-shadow: 0 1px 5px #ccc;

box-shadow: 0 1px 5px #ccc;

border-bottom-left-radius: 15px;

-moz-border-radius-bottomleft: 15px;

-webkit-border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

-moz-border-radius-bottomright: 15px;

-webkit-border-bottom-right-radius: 15px;

z-index: 0;

}

.closed {

z-index: 1;

width: 460px;

overflow: hidden;

margin: 0 auto;

height: 80px;

margin-bottom: -5px;

}

.closed .mid {

/*background: #fff;*/

width: 360px;

margin: 0 auto;

margin-top: -70px;

height: 80px;

background-color: #fff;

-moz-box-shadow: 0 1px 5px #ccc;

-webkit-box-shadow: 0 1px 5px #ccc;

box-shadow: 0 1px 5px #ccc;

-webkit-border-radius: 12px;

}

.left,

.right {

display: none;

}

.closed .right {

display: block;

width: 0;

height: 100px;

border-left: 60px solid #fff;

border-right: 1px solid #ccc;

margin-left: 384px;

-webkit-transform: rotate(39deg);

margin-top: -34px;

box-shadow: 1px -1px 1px #ccc;

}

.closed .left {

display: block;

width: 0;

height: 100px;

border-right: 60px solid #fff;

border-left: 1px solid #ccc;

margin-left: 16px;

-webkit-transform: rotate(-39deg);

margin-top: -100px;

box-shadow: -1px -1px 1px #ccc;

}

总结

以上是凯发k8官方网为你收集整理的html中css信封怎么表示,css3信封形状的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。