CSS

語言：

CSSSCSS

確定

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

body {

background: url(http://www.howie23.org/pics/seamless-wood-grain-texture.jpg);

background-size: cover;

font-family: 'Open Sans';

font-size: 16px;

}

.bottom,

.paper {

margin: 2rem auto;

}

.bottom {

background-color: #A4231F;

height: 650px;

max-width: 450px;

transform: rotate(-7.5deg);

width: 100%;

}

.paper {

background-color: #fff;

box-shadow: -1px 3px 3px 3px #222;

font-size: 4rem;

height: 550px;

max-width: 350px;

line-height: 1;

padding: 2.5rem 4rem;

position: relative;

text-transform: uppercase;

transform: rotate(7.5deg);

width: 100%;

z-index: 10px;

}

.paper p {

margin-top: 0;

}

.paper p:after {

bottom: 50px;

color: #CB262E;

content: "\f004";

font-family: fontAwesome;

font-size: 2rem;

position: absolute;

right: 50px;

}

.highlight {

color: #CB262E;

}

.highlight:last-child {

display: block;

}

總結

以上是生活随笔為你收集整理的html5情人节贺卡,Web工程师的情人节卡片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。