记事本怎样应用css样式,使用CSS3模拟记事本纸张

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

body {

margin: 0;

padding: 0;

background: lightgoldenrodyellow;

}

.paper {

position: absolute;

height: 550px;

width: 450px;

background: rgba(255, 255, 255, 0.9);

margin: -275px -225px;

left: 50%;

top: 50%;

box-shadow: 0px 0px 5px 0px #888;

}

.paper::before {

content: '';

position: absolute;

left: 45px;

height: 100%;

width: 2px;

background: rgba(255, 0, 0, 0.4);

}

.lines {

margin-top: 40px;

height: calc(100% - 40px);

width: 100%;

background-image: -webkit-repeating-linear-gradient(white 0px, white 24px, steelblue 25px);

background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);

}

.text {

position: absolute;

top: 65px;

left: 55px;

bottom: 10px;

right: 10px;

line-height: 25px;

font-family: 'Indie Flower';

overflow: hidden;

outline: none;

}

.holes {

position: absolute;

left: 10px;

height: 25px;

width: 25px;

background: lightgoldenrodyellow;

border-radius: 50%;

box-shadow: inset 0px 0px 2px 0px #888;

}

.hole-top {

top: 10%;

}

.hole-middle {

top: 50%;

}

.hole-bottom {

bottom: 10%;

}