css的cal(),CSS3 Calendar

最新推荐文章于 2024-08-20 23:30:49 发布

Madmoiselle.may

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量189

点赞数

文章标签： css的cal()

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);

body {

margin: 0 auto;

padding: 0;

width: 600px;

font-family: 'Roboto', sans-serif;

font-weight: 400;

background: #1abc9c;

}

#cover {

height: 598px;

position: relative;

background: #1abc9c;

}

.calendar {

width: 300px;

height: 400px;

margin: 0 auto;

margin-top: 20px;

border: 5px solid #3d3d3d;

border-radius: 20px;

background: #fff;

box-shadow: 0 10px 0 0 #16a085;

}

.calendar > .top {

width: 100%;

height: 60px;

border-bottom: 5px solid #3d3d3d;

background: #b9b9b9;

border-top-right-radius: 15px;

border-top-left-radius: 15px;

}

.calendar > .top > ul {

list-style: none;

width: 100%;

margin: 0;

padding: 0;

line-height: 75px;

}

.calendar > .top > ul > li {

width: 20px;

height: 20px;

margin: 0 8px;

border: 5px solid #3d3d3d;

border-radius: 50%;

display: inline-block;

background: #1abc9c;

position: relative;

}

.calendar > .top > ul > li:after {

content: '';

width: 18px;

height: 60px;

background: #3d3d3d;

position: absolute;

margin: auto;

left: 0;

right: 0;

bottom: 1px;

border-radius: 15px;

}

.calendar > .day {

position: relative;

box-shadow: inset 0 19px 0 0 #fff, inset 0 20px 0 0 #a2a2a2, inset 0 39px 0 0 #fff, inset 0 40px 0 0 #a2a2a2, inset 0 59px 0 0 #fff, inset 0 60px 0 0 #a2a2a2, inset 0 79px 0 0 #fff, inset 0 80px 0 0 #a2a2a2, inset 0 99px 0 0 #fff, inset 0 100px 0 0 #a2a2a2, inset 0 119px 0 0 #fff, inset 0 120px 0 0 #a2a2a2, inset 0 139px 0 0 #fff, inset 0 140px 0 0 #a2a2a2, inset 0 159px 0 0 #fff, inset 0 160px 0 0 #a2a2a2, inset 0 179px 0 0 #fff, inset 0 180px 0 0 #a2a2a2, inset 0 199px 0 0 #fff, inset 0 200px 0 0 #a2a2a2, inset 0 219px 0 0 #fff, inset 0 220px 0 0 #a2a2a2, inset 0 239px 0 0 #fff, inset 0 240px 0 0 #a2a2a2, inset 0 259px 0 0 #fff, inset 0 260px 0 0 #a2a2a2, inset 0 279px 0 0 #fff, inset 0 280px 0 0 #a2a2a2, inset 0 299px 0 0 #fff, inset 0 300px 0 0 #a2a2a2, inset 0 319px 0 0 #fff, inset 0 320px 0 0 #a2a2a2;

}

.calendar > .day > h1 {

text-align: center;

line-height: 335px;

font-size: 200px;

margin: 0;

color: #3d3d3d;

text-shadow: 0 10px 0 #fff, 0 -10px 0 #fff, 10px 0 0 #fff, -10px 0 0 #fff;

}

.calendar > .day > span {

position: absolute;

margin: auto;