`

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
分享到:
评论

相关推荐

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    HTML5和CSS3是现代网页开发的两大核心技术,它们极大地扩展了网页的展现力和交互性。本资源提供了一份详尽的中文参考手册,旨在帮助开发者深入理解和运用这两种技术。 HTML5是HTML(超文本标记语言)的最新版本,它...

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    "HTML5和CSS3实战"聚焦于这两个技术的实际应用,提供了一系列实战项目来帮助读者掌握HTML5的新特性,如语义化标签(如、、等)、离线存储、拖放功能、媒体元素等。此外,通过实际案例,读者将学习如何结合CSS3的新...

    html5+css3源码

    总的来说,这个“html5+css3源码”压缩包为程序员提供了一个展示技术魅力和表达情感的平台,通过巧妙结合HTML5的新特性与CSS3的样式效果,可以打造出独一无二的表白网页。无论是动态的画面还是创新的设计,都充分...

    css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦

    《CSS3与HTML5绘制哆啦A梦:技术解析与应用》 在现代网页设计领域,HTML5和CSS3的应用已经越来越广泛,它们为开发者带来了更丰富的表现力和更强的功能性。今天,我们将深入探讨一个有趣的示例——利用HTML5和CSS3...

    html5+css3课件打包

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页设计师和开发者提供了丰富的功能和优雅的样式控制。此“html5+css3课件打包”资源包含了从基础到高级的一系列课程材料,旨在帮助学习者全面掌握这两门语言...

    html5+css3从入门到精通

    HTML5和CSS3是现代Web开发的基石,它们极大地扩展了网页设计和开发的可能性,使得开发者可以构建功能丰富、响应式且视觉上引人入胜的网站。本教程"html5+css3从入门到精通"针对前端新手,旨在帮助初学者快速掌握这两...

    html5+css3实战 例子

    HTML5和CSS3是现代网页开发的两大核心技术,它们的结合使用极大地提升了Web设计的...通过阅读这本书,开发者不仅可以了解HTML5和CSS3的基础知识,还能学习到如何在项目中有效应用这些新技术,从而提升自己的专业素养。

    HTML5+CSS3网页设计模板(30例)zip

    例如,你可以观察模板中如何使用新的HTML5元素来组织内容,以及CSS3如何实现复杂的布局和动画效果。这些实例对于实战练习和快速上手非常有帮助。 总之,这个资源包提供了一个宝贵的学习平台,通过研究这些...

    html5+css3+JS代码

    HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术,它们共同构成了Web...通过《精通html5+css3+JavaScript页面设计》这本书的学习和实践,你可以逐步提升自己的Web开发能力,为你的职业生涯开启新的篇章。

    HTML5与CSS3基础教程 第八版 中文版 高清 PDF

    本书《HTML5与CSS3基础教程 第八版》不仅会详细介绍这些基础知识,还会涉及更高级的主题,如Web存储(Web Storage)、离线应用(Offline Application Cache)、WebSocket实现的实时通信,以及CSS3的新特性,如...

    纯HTML5和CSS3实现高仿小米商城源码.zip

    高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3...

    王者归来-HTML5與CSS3权威指南书范例

    通过分析和运行这些范例,开发者可以学习到如何利用HTML5的新特性如离线存储、拖放功能、画布绘图以及Web Workers等,同时掌握CSS3的高级选择器、媒体查询、渐变、阴影和过渡效果等。 【标签】"王者"可能象征着...

    HTML5+CSS3网页布局任务教程课件汇总整本书电子教案全套课件完整版ppt教学教程.pptx

    HTML5+CSS3 网页布局任务教程课件汇总整本书电子教案全套课件完整版 ppt 教学教程 HTML5+CSS3 是网页开发的两大基石, HTML 负责网页的结构, CSS 负责网页的表现。网页开发需要使用 HTML 和 CSS 语言, HTML 负责...

    (完整版)《HTML5+CSS3网站设计基础教程》_教学大纲.pdf

    HTML5+CSS3 网站设计基础教程知识点总结 《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。本课程旨在让学生了解网页开发...

    html5 css3电子书本翻书动画特效

    总的来说,“html5 css3电子书本翻书动画特效”是一个结合了HTML5的新特性、CSS3的动画技术以及JavaScript交互功能的综合性项目,它展示了现代Web技术如何构建出富有创新和用户体验良好的数字产品。通过学习和实践...

    html5+css3面试题答案.docx

    HTML5 和 CSS3 面试题答案 HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术,以下是关于 HTML5 和 CSS3 的一些常见面试题答案: 优雅降级和渐进增强 优雅降级(Gracious Degradation)和渐进增强...

Global site tag (gtag.js) - Google Analytics