CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果，使网站更好看，更能够吸引用户访问。这篇文章中，我收集了一组实用的 CSS3 技巧，能够帮助你美化您的网站，并给它一个更专业的外观和感觉。
黑白图像
下面的 CSS 代码能够把彩色图像转变成黑白风格：
|
1
2
3
4
5
6
7
|
img.desaturate {
filter: grayscale(
100%
);
-webkit-filter: grayscale(
100%
);
-moz-filter: grayscale(
100%
);
-ms-filter: grayscale(
100%
);
-o-filter: grayscale(
100%
);
}
|
页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
body:before {
content
:
""
;
position
:
fixed
;
top
:
-10px
;
left
:
0
;
width
:
100%
;
height
:
10px
;
-webkit-box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,.
8
);
-moz-box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,.
8
);
box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,.
8
);
z-index
:
100
;
}
|
检测鼠标双击
不管您相信与否，使用 CSS 就能够检测出元素是否被双击：
HTML：
|
1
2
3
4
|
<div
class
=
"test3"
>
<span><input type=
"text"
value=
" "
readonly=
"true"
/>
</div>
|
CSS：
|
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
|
.test
3
span {
position
:
relative
;
}
.test
3
span a {
position
:
relative
;
z-index
:
2
;
}
.test
3
span a:hover, .test
3
span a:active {
z-index
:
4
;
}
.test
3
span input {
background
:
transparent
;
border
:
0
;
cursor
:
pointer
;
position
:
absolute
;
top
:
-1px
;
left
:
0
;
width
:
101%
;
/* Hacky */
height
:
301%
;
/* Hacky */
z-index
:
3
;
}
.test
3
span input:focus {
background
:
transparent
;
border
:
0
;
z-index
:
1
;
}
|
CSS 实现三角形
这其实是一个古老的技巧，不需要用到 CSS3 新特性就能实现：
|
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
|
/* create an arrow that points up */
div.arrow-up {
width
:
0px
;
height
:
0px
;
border-left
:
5px
solid
transparent
;
/* left arrow slant */
border-right
:
5px
solid
transparent
;
/* right arrow slant */
border-bottom
:
5px
solid
#2f2f2f
;
/* bottom, add background color here */
font-size
:
0px
;
line-height
:
0px
;
}
/* create an arrow that points down */
div.arrow-down {
width
:
0px
;
height
:
0px
;
border-left
:
5px
solid
transparent
;
border-right
:
5px
solid
transparent
;
border-top
:
5px
solid
#2f2f2f
;
font-size
:
0px
;
line-height
:
0px
;
}
/* create an arrow that points left */
div.arrow-
left
{
width
:
0px
;
height
:
0px
;
border-bottom
:
5px
solid
transparent
;
/* left arrow slant */
border-top
:
5px
solid
transparent
;
/* right arrow slant */
border-right
:
5px
solid
#2f2f2f
;
/* bottom, add background color here */
font-size
:
0px
;
line-height
:
0px
;
}
/* create an arrow that points right */
div.arrow-
right
{
width
:
0px
;
height
:
0px
;
border-bottom
:
5px
solid
transparent
;
/* left arrow slant */
border-top
:
5px
solid
transparent
;
/* right arrow slant */
border-left
:
5px
solid
#2f2f2f
;
/* bottom, add background color here */
font-size
:
0px
;
line-height
:
0px
;
}
|
CSS3 calc() 的使用
calc() 用法类似于函数，能够给元素设置动态的值：
|
1
2
3
4
5
6
7
8
9
10
11
|
/* basic calc */
.simpleBlock {
width
: calc(
100%
-
100px
);
}
/* calc in calc */
.complexBlock {
width
: calc(
100%
-
50%
/
3
);
padding
:
5px
calc(
3%
-
2px
);
margin-left
: calc(
10%
+
10px
);
}
|
文本渐变
文本渐变效果很流行，使用 CSS3 能够很简单就实现：
|
1
2
3
4
5
6
7
8
9
10
11
|
h
2
[data-text] {
position
:
relative
;
}
h
2
[data-text]::after {
content
:
attr
(data-text);
z-index
:
10
;
color
:
#e3e3e3
;
position
:
absolute
;
top
:
0
;
left
:
0
;
-webkit-mask-image: -webkit-gradient(linear,
left
top
,
left
bottom
, from(rgba(
0
,
0
,
0
,
0
)), color-stop(
50%
, rgba(
0
,
0
,
0
,
1
)), to(rgba(
0
,
0
,
0
,
0
)));
|
禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
|
1
|
.disabled { pointer-events:
none
; }
|
盒子效果
下面的代码可以实现一个漂亮的盒子效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
p {
padding
:
5px
10px
;
margin
:
10px
;
background
:
#ff0030
;
color
:
#fff
;
font-size
:
21px
;
line-height
:
1.3em
;
border
:
2px
dashed
#fff
;
border-radius:
3px
;
-moz-border-radius:
3px
;
-webkit-border-radius:
3px
;
-moz-box-shadow:
0
0
0
4px
#ff0030
,
2px
1px
4px
4px
rgba(
10
,
10
,
0
,.
5
);
-webkit-box-shadow:
0
0
0
4px
#ff0030
,
2px
1px
4px
4px
rgba(
10
,
10
,
0
,.
5
);
box-shadow:
0
0
0
4px
#ff0030
,
2px
1px
6px
4px
rgba(
10
,
10
,
0
,.
5
);
text-shadow
:
-1px
-1px
#aa3030
;
}
|
自定义滚动条
过去一直都只有 IE 才能设置滚动条样式，现在好了，Webkit 也提供了设置滚动条的属性：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
::-webkit-scrollbar {
width
:
12px
;
}
::-webkit-scrollbar-track {
background
:
none
;
}
::-webkit-scrollbar-thumb {
background
: -webkit-linear-gradient(
left
,
#547c90
,
#002640
);
border
:
1px
solid
#333
;
box-shadow:
inset
1px
0
0
rgba(
255
,
255
,
255
,
0.4
);
}
|
模糊文本
简单但很漂亮的文本模糊效果，简单又好看！
|
1
2
3
4
|
.blur {
color
:
transparent
;
text-shadow
:
0
0
5px
rgba(
0
,
0
,
0
,
0.5
);
}
|
圆角丝带效果
这段代码有点长，但是圆角丝带效果很奇特！
|
1
2
3
|
<div
class
=
"wrapper"
>
<div
class
=
"ribbon-wrapper-green"
><div
class
=
"ribbon-green"
>NEWS</div></div>
</div>
|
CSS:
扫一扫
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
