这里收集了30个非常有用的CSS代码片段，非常值得大家去收藏，以备不时之需。
1、创建跨浏览器的图像灰度
如何将图片制作为灰度图片，而且在所有的浏览器中都表现一致呢？答案是结合使用svg和filter过滤器。
<
svg
xmlns
=
"http://www.w3.org/2000/svg"
>
<
filter
id
=
"grayscale"
>
<
feColorMatrix
type
=
"matrix"
values
=
"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
/>
</
filter
>
</
svg
>
|
img {
filter:
url
(filters.svg#grayscale);
/* Firefox 3.5+ */
filter:
gray
;
/* IE6-9 */
-webkit-filter: grayscale(
1
);
/* Google Chrome, Safari 6+ & Opera 15+ */
}
|
2、元素垂直居中
要使一个元素相对于它的父元素垂直居中需要使用一些小技巧。
.ele{
position
:
relative
;
top
:
50%
;
-webkit-
transform
:
translateY
(
-50%
);
-o-
transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
}
|
更多关于元素垂直居中的资料可以参考：《使用3行CSS代码使任何元素垂直居中》
3、背景渐变动画
通常情况下，元素的渐变背景是不能制作动画效果的，你可以使用下面的代码来实现这个动画效果。实际上它是使用修改背景图片位置的方法来实现这个效果的。
button {
background-image
: linear-gradient(
#5187c4
,
#1c2f45
);
background-size
:
auto
200%
;
background-position
:
0
100%
;
transition
: background-position
0.5
s;
}
button:hover {
background-position
:
0
0
;
}
|
查看下面的效果演示：
The Button
Transition
4、为超链接添加个性样式
有时候我们需要为不同的超链接设置不同的样式，使用户能够一眼就看出这个超链接的作用。下面的CSS代码将不同的超链接设置为不同的颜色，并为每个超链接设置不同的小图标。
a[href^=
"http://"
]{
padding-right
:
20px
;
background
:
url
(external.gif)
no-repeat
center
right
;
}
/* emails */
a[href^=
"mailto:"
]{
padding-right
:
20px
;
background
:
url
(email.png)
no-repeat
center
right
;
}
/* pdfs */
a[href$=
".pdf"
]{
padding-right
:
20px
;
background
:
url
(pdf.png)
no-repeat
center
right
;
}
|
效果如下面所示：
Hello, Here i will share Google Material Design eBook.
You can going to my website or drop me Email for more info.
5、表格列宽自适应
要调整一个的表格的列宽是一件非常头疼的事情。你可以为td元素设置white-space: nowrap;，让文本在表格中自适应。
td {
white-space
:
nowrap
;
}
|
查看下面表格的前后比较效果。
非主动列宽的表格
| 1 | Mr. John Doe | United States of America | 2014 |
| 2 | Mr. Paul Jones | New Zealand | 2013 |
自动列宽的表格
| 1 | Mr. John Doe | United States of America | 2014 |
| 2 | Mr. Paul Jones | New Zealand | 2013 |
5、经典的CSS清除浮动
.clearfix:after {
content
:
"."
;
display
:
block
;
clear
:
both
;
visibility
:
hidden
;
line-height
:
0
;
height
:
0
; }
.clearfix {
display
:
inline-block
; }
html[xmlns] .clearfix {
display
:
block
; }
* html .clearfix {
height
:
1%
; }
|
6、最新的CSS清除浮动方法
.clearfix:before, .container:after {
content
:
""
;
display
: table; }
.clearfix:after {
clear
:
both
; }
/* IE 6/7 */
.clearfix { zoom:
1
; }
|
7、制作跨浏览器的透明度
.
transparent
{
filter: alpha(opacity=
50
);
/* internet explorer */
-khtml-
opacity
:
0.5
;
/* khtml, old safari */
-moz-
opacity
:
0.5
;
/* mozilla, netscape */
opacity
:
0.5
;
/* fx, safari, opera */
}
|
具体效果如下：
8、制作模糊文字
.blurry-text {
color
:
transparent
;
text-shadow
:
0
0
5px
rgba(
0
,
0
,
0
,
0.5
);
}
|
效果如下：
这是一些模糊文本。
更多关于模糊文字的资料请参考：《使用CSS制作跨浏览器的模糊文字效果》。
9、用CSS实现LOADING省略号动画
这段CSS代码使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果。
.loading:after {
overflow
:
hidden
;
display
:
inline-block
;
vertical-align
:
bottom
;
animation
: ellipsis
2
s infinite;
content
:
"\2026"
;
/* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width
:
2px
;
}
to {
width
:
15px
;
}
}
|
看一看下面loading文字后面的小省略号的动画效果。
Loading
10、不同弧度的圆角
#container {
-webkit-
border-radius
:
4px
3px
6px
10px
;
-moz-
border-radius
:
4px
3px
6px
10px
;
-o-
border-radius
:
4px
3px
6px
10px
;
border-radius
:
4px
3px
6px
10px
;
}
/* 下面的代码是上面代码的分解代码 */
#container {
-webkit-
border-top-left-radius
:
4px
;
-webkit-border-top-right-radius:
3px
;
-webkit-
border-bottom-right-radius
:
6px
;
-webkit-border-bottom-left-radius:
10px
;
-moz-border-radius-topleft:
4px
;
-moz-border-radius-topright:
3px
;
-moz-border-radius-bottomright:
6px
;
-moz-border-radius-bottomleft:
10px
;
}
|
11、通用媒体查询
/* Smartphones (portrait and landscape) ----------- */
@media only
screen
and (min-device-width :
320px
) and (max-device-width :
480px
) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only
screen
and (min-width :
321px
) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only
screen
and (max-width :
320px
) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only
screen
and (min-device-width :
768px
) and (max-device-width :
1024px
) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only
screen
and (min-device-width :
768px
) and (max-device-width :
1024px
) and (orientation :
landscape
) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only
screen
and (min-device-width :
768px
) and (max-device-width :
1024px
) and (orientation :
portrait
) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only
screen
and (min-width :
1224px
) {
/* Styles */
}
/* Large screens ----------- */
@media only
screen
and (min-width :
1824px
) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only
screen
and (-webkit-min-device-pixel-ratio:
1.5
), only
screen
and (min-device-pixel-ratio:
1.5
) {
/* Styles */
}
|
12、自定义文本选择
正常情况下用鼠标选择一段文本是呈现蓝底白字的效果，使用下面的代码可以改变它们。
::selection {
background
:
#e2eae2
; }
::-moz-selection {
background
:
#e2eae2
; }
::-webkit-selection {
background
:
#e2eae2
; }
|
DEMO:用鼠标选择这里的文字看看效果。
13、图片边框效果
下面的代码可以为你的图片添加漂亮的带阴影的边框效果。
img.polaroid {
background
:
#000
;
/*Change this to a background image or remove*/
border
:
solid
#fff
;
border-width
:
6px
6px
20px
6px
;
box-shadow
:
1px
1px
5px
#333
;
/* Standard blur at 5px. Increase for more depth */
-webkit-
box-shadow
:
1px
1px
5px
#333
;
-moz-
box-shadow
:
1px
1px
5px
#333
;
height
:
200px
;
/*Set to height of your image or desired div*/
width
:
200px
;
/*Set to width of your image or desired div*/
}
|
14、CSS全屏背景图片
全屏图片主要使用的是CSS的background-size属性。关于该属性的详细介绍可以参考：《使用一行CSS代码生成全屏背景图像》。
html {
background
:
url
(
'images/bg.jpg'
)
no-repeat
center
center
fixed
;
-webkit-
background-size
:
cover
;
-moz-
background-size
:
cover
;
-o-
background-size
:
cover
;
background-size
:
cover
;
}
|
15、CSS3渐变模板
#colorbox {
background
:
#629721
;
background-image
: -webkit-gradient(linear,
left
top
,
left
bottom
, from(
#83b842
), to(
#629721
));
background-image
: -webkit-linear-gradient(
top
,
#83b842
,
#629721
);
background-image
: -moz-linear-gradient(
top
,
#83b842
,
#629721
);
background-image
: -ms-linear-gradient(
top
,
#83b842
,
#629721
);
background-image
: -o-linear-gradient(
top
,
#83b842
,
#629721
);
background-image
: linear-gradient(
top
,
#83b842
,
#629721
);
}
|
16、@FONT-FACE模板
@font-face {
font-family
:
'MyWebFont'
;
src
:
url
(
'webfont.eot'
);
/* IE9 Compat Modes */
src
:
url
(
'webfont.eot?#iefix'
)
format
(
'embedded-opentype'
),
/* IE6-IE8 */
url
(
'webfont.woff'
)
format
(
'woff'
),
/* Modern Browsers */
url
(
'webfont.ttf'
)
format
(
'truetype'
),
/* Safari, Android, iOS */
url
(
'webfont.svg#svgFontName'
)
format
(
'svg'
);
/* Legacy iOS */
}
body {
font-family
:
'MyWebFont'
,
Arial
,
sans-serif
;
}
|
17、CSS3 斑马线
tbody tr:nth-child(odd) {
background-color
:
#ccc
;
}
|
18、元素内阴影效果
#mydiv {
-moz-
box-shadow
:
inset
2px
0
4px
#000
;
-webkit-
box-shadow
:
inset
2px
0
4px
#000
;
box-shadow
:
inset
2px
0
4px
#000
;
}
|
19、元素外阴影效果
#mydiv {
-webkit-
box-shadow
:
0
2px
2px
-2px
rgba(
0
,
0
,
0
,
0.52
);
-moz-
box-shadow
:
0
2px
2px
-2px
rgba(
0
,
0
,
0
,
0.52
);
box-shadow
:
0
2px
2px
-2px
rgba(
0
,
0
,
0
,
0.52
);
}
|
20、CSS3多列文本布局
#columns
-3
{
text-align
:
justify
;
-moz-column-count:
3
;
-moz-column-gap:
12px
;
-moz-column-rule:
1px
solid
#c4c8cc
;
-webkit-column-count:
3
;
-webkit-column-gap:
12px
;
-webkit-column-rule:
1px
solid
#c4c8cc
;
}
|
21、FOOTER固定在页面的顶部
你是否曾经想将页面的脚部固定在网页的底部呢？下面的代码可以帮你实现，并且添加了对IE6的支持。
#footer {
position
:
fixed
;
left
:
0px
;
bottom
:
0px
;
height
:
30px
;
width
:
100%
;
background
:
#444
;
}
/* IE 6 */
* html #footer {
position
:
absolute
;
top
: expression((
0
-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+
'px'
);
}
|
22、IE6的PNG透明修复
在IE6中，PNG图片无法显示透明像素。使用下面的代码可以修复这个BUG。
.bg {
width
:
200px
;
height
:
100px
;
background
:
url
(/folder/yourimage.png)
no-repeat
;
_background
:
none
;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/folder/yourimage.png'
,sizingMethod=
'crop'
);
}
/* 1px gif method */
img, .png {
position
:
relative
;
behavior: expression((this.runtimeStyle.behavior=
"none"
)&&(this.pngSet?this.pngSet=true:(this.nodeName ==
"IMG"
&& this.src.toLowerCase().indexOf(
'.png'
)>
-1
?(this.runtimeStyle.backgroundImage =
"none"
,
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ this.src +
"', sizingMethod='image')"
,
this.src =
"images/transparent.gif"
):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(
'url("'
,
''
).replace(
'")'
,
''
),
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ this.origBg +
"', sizingMethod='crop')"
,
this.runtimeStyle.backgroundImage =
"none"
)),this.pngSet=true));
}
|
23、设置跨浏览器的元素最小高度
#container {
min-height
:
550px
;
height
:
auto
!important
;
height
:
550px
;
}
|
24、修改输入框的边框样式
input[type=text], textarea {
-webkit-
transition
:
all
0.30
s ease-in-out;
-moz-
transition
:
all
0.30
s ease-in-out;
-ms-
transition
:
all
0.30
s ease-in-out;
-o-
transition
:
all
0.30
s ease-in-out;
outline
:
none
;
padding
:
3px
0px
3px
3px
;
margin
:
5px
1px
3px
0px
;
border
:
1px
solid
#ddd
;
}
input[type=text]:focus, textarea:focus {
box-shadow
:
0
0
5px
rgba(
81
,
203
,
238
,
1
);
padding
:
3px
0px
3px
3px
;
margin
:
5px
1px
3px
0px
;
border
:
1px
solid
rgba(
81
,
203
,
238
,
1
);
}
|
查看下面的例子，鼠标选中输入框看看边框效果。
没有修改样式的输入框：
修改样式的输入框：
25、强制换行
pre
{
white-space
: pre-wrap;
/* css-3 */
white-space
: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space
: -pre-wrap;
/* Opera 4-6 */
white-space
: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
}
|
26、在所有可点击的元素使用手形鼠标样式
a[href], input[type=
'submit'
], input[type=
'image'
], label[for], select, button, .
pointer
{
cursor
:
pointer
;
}
|
27、在可打印的网页中显示URLS
@media
print
{
a:after {
content
:
" ["
attr
(href)
"] "
;
}
}
|
28、禁用移动WEBKIT的选择高亮
body {
-webkit-touch-callout:
none
;
-webkit-
user-select
:
none
;
-khtml-
user-select
:
none
;
-moz-
user-select
:
none
;
-ms-
user-select
:
none
;
user-select
:
none
;
}
|
29、CSS3国际象棋棋盘格背景图案
body {
background-color
:
white
;
background-image
: linear-gradient(
45
deg,
black
25%
,
transparent
25%
,
transparent
75%
,
black
75%
,
black
),
linear-gradient(
45
deg,
black
25%
,
transparent
25%
,
transparent
75%
,
black
75%
,
black
);
background-size
:
100px
100px
;
background-position
:
0
0
,
50px
50px
;
}
|
30、纯CSS3纸张阴影特效
ul.box {
position
:
relative
;
z-index
:
1
;
/* prevent shadows falling behind containers with backgrounds */
overflow
:
hidden
;
list-style
:
none
;
margin
:
0
;
padding
:
0
;
}
ul.box li {
position
:
relative
;
float
:
left
;
width
:
250px
;
height
:
150px
;
padding
:
0
;
border
:
1px
solid
#efefef
;
margin
:
0
30px
30px
0
;
background
:
#fff
;
-webkit-
box-shadow
:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
-moz-
box-shadow
:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
box-shadow
:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
}
ul.box li:before,
ul.box li:after {
content
:
''
;
z-index
:
-1
;
position
:
absolute
;
left
:
10px
;
bottom
:
10px
;
width
:
70%
;
max-width
:
300px
;
/* avoid rotation causing ugly appearance at large container widths */
max-height
:
100px
;
height
:
55%
;
-webkit-
box-shadow
:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
-moz-
box-shadow
:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
box-shadow
:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
-webkit-
transform
: skew(
-15
deg)
rotate
(
-6
deg);
-moz-
transform
: skew(
-15
deg)
rotate
(
-6
deg);
-ms-
transform
: skew(
-15
deg)
rotate
(
-6
deg);
-o-
transform
: skew(
-15
deg)
rotate
(
-6
deg);
transform
: skew(
-15
deg)
rotate
(
-6
deg);
}
ul.box li:after {
left
:
auto
;
right
:
10px
;
-webkit-
transform
: skew(
15
deg)
rotate
(
6
deg);
-moz-
transform
: skew(
15
deg)
rotate
(
6
deg);
-ms-
transform
: skew(
15
deg)
rotate
(
6
deg);
-o-
transform
: skew(
15
deg)
rotate
(
6
deg);
transform
: skew(
15
deg)
rotate
(
6
deg);
}
|
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506011951.html
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
