CSSCode

CSS , 评论

1 文字和字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*$1.1 自定义字体*/
@font-face{
    font-family: xujinglei;/*字体名称*/
    src:url(xujinglei.ttf),url(xujinglei.eot);/*字体路径*/
}
.font{
    font-family: xujinglei;/*使用字体*/
    font-size: 18px;
}
/*$1.2 首字符下沉*/
#a{
    text-indent: 15px;
}
#b{
    text-indent: -6px;
}
#c{
    text-indent: 0.5em;
}
#b::first-letter{
    font-size: 30px;
    color:red;
}
#c::first-letter{
    font-size: 30px;
    color:#b23aee;
    float:left;/*下沉必须浮动*/
}
p.uppercase::first-letter{
    text-transform: uppercase;/*大写*/
}

/*$1.3 文本被选中时的样式*/
::selection{
    background-color: silver;
    color:gold;
}
::-moz-selection{ /*firefox设置*/
    background-color: silver;
    color:gold;
}

/*$1.4 文本对齐*/
p.duiqi{
    text-align: center;/*居中*/
    /*text-align: left;  左对齐*/
    /*text-align: right;  右对齐*/
    line-height: 15px; /*行高设置*/

}
/*$1.5 设置文字、字符的间距*/
p.wordspacing{word-spacing:20px;}/*设置空格的长度*/
p.letterspacing{letter-spacing:20px;}/*设置字间距*/
p.lineheight{line-height:O.3;}/*设置行间距*/
p.whitespace_normal{white-space:normal;}/*默认，忽略多个空格为1个，忽略回车符*/
p.whitespace_pre{white-space:pre;}/*保留多个空格*/
p.whitespace_nowrap{white-space:nowrap;}/*忽略回车符，禁止换行，直到遇到br*/
p.whitespace_prewrap{white-space:pre-wrap;}/*保留所有空格符与回车符*/
p.whitespace_preline{white-space:pre-line;}/*忽略多个空格为1个，保留回车*/

/*$1.6 文本的装饰——画线、粗体、斜体*/
.overline{text-decoration: overline;}
.through{text-decoration: line-through;}
.underline{text-decoration: underline;}
.bold{font-weight: bold;}
.italic{font-style:italic ;}
.oblique{font-style:oblique ;}
/*$1.7 文字阴影*/
.shadow{text-shadow: 5px 5px 5px #6600ff;}

/*$1.8 毛玻璃效果*/
.shadow-glass{
    text-shadow: 1px 1px 2px 2px #ccc;
    color: rgba(0,0,0,0);
    text-shadow: 0 0 10px black;
}

/*$1.9 文本溢出处理*/
/*
常见的溢出处理方式：
    简单裁切
    简单隐藏
    隐藏并显示省略号
    使用滚动条
*/
/*简单裁切*/
.hide{
    overflow: hidden;
}
/*简单隐藏*/
.scroll{
    overflow: scroll;
}
/*隐藏并显示省略号*/
.clip{
    border:1px solid;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
/*使用滚动条*/
.elli{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*$1.10  金属质感文字*/
/*
添加一个使用半透明和渐变效果的遮罩层
*/

p{
    color:white;
    background: black;
    font-weight: bold;
    font-size: 30px;
    position: relative;
}
span.cover{
    width: 100%;
    height:100%;
    position: absolute;
    background: linear-gradient(to bottom,black 0%,transparent 50%,black);
    opacity: 0.5;/*设置透明度*/
}


2 边框和图片

基础

搜索框

微博发布框

拍立得效果框

CSS3 动画边框

边框移动特效

Banner图片的标签

黑白图片

图片水印

图片细节放大展示

图片瀑布流

幻灯片

手风琴

图片自适应

纯CSS绘制图像

图片原地放大

图片翻转

图像地图

YukiXueyan一只前端咸鱼酱

满怀希望就会所向披靡