首页 > Web开发 > 详细

HTML5 CSS3新特征

时间:2015-08-26 02:18:46      阅读:261      评论:0      收藏:0      [点我收藏+]

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; 
}

?

HTML5 CSS3新特征

原文:http://onestopweb.iteye.com/blog/2237594

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!