`

HTML5 CSS3新特征

 
阅读更多

border-radius

-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;

 

box-shadow

-webkit-box-shadow: 1px 1px 3px #292929; 
-moz-box-shadow: 1px 1px 3px #292929; 
box-shadow: 1px 1px 3px #292929;

 
text-shadow

h1 { 
    text-shadow: 0 1px 0 white; 
    color: #292929; 
}

 
text-stroke

h1 { 
    -webkit-text-stroke: 3px black; 
    color: white; 
}

 
background

.box { 
    background: url(image/path.jpg) 0 0 no-repeat, 
    url(image2/path.jpg) 100% 0 no-repeat; 
}

 以上,通过逗号分隔符,插入了两张背景图像,第一个的定位是(0,0),第二个的定位是(100%,0)。
要确定你对不支持的浏览器使用了备用图片,否则,它将跳此属性,使背景图像留空。

background-size

background: url(path/to/image.jpg) no-repeat; 
background-size: 100% 100%;

 
text-overflow

.box { 
    -o-text-overflow: ellipsis; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    border: 1px solid black; 
    width: 400px; 
    padding: 20px; 
    cursor: pointer; 
}

 
display

#container { 
    width: 960px; 
    height: 500px;
    background: #e3e3e3; 
    margin: auto; 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
}

 
resize

textarea { 
    -moz-resize: vertical; 
    -webkit-resize: vertical; 
    resize: vertical; 
}

 
transition

ul a { 
    -webkit-transition: padding .4s; 
    -moz-transition: padding .4s; 
    -o-transition: padding .4s; 
    transition: padding .4s; 
} 
a:hover { 
    padding-left: 6px; 
}

 

2
3
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics