`

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

相关推荐

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

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

    html5+css3实现html5游戏页面

    总的来说,"html5+css3实现html5游戏页面"是一个结合了HTML5新特性和CSS3高级样式的实践案例,它展示了如何通过这两种技术构建一个功能齐全、视觉效果出色的手机游戏页面。对于想要学习HTML5游戏开发或者提升网页...

    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网页设计模板(30例)zip

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

    html5+css3课件打包

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

    html5+css3从入门到精通

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

    html5+css3实战 例子

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

    9个HTML5 CSS3精彩案例

    HTML5和CSS3是现代网页开发的两大核心技术,它们为网页设计带来了丰富的功能和美观的视觉效果。在“9个HTML5 CSS3精彩案例”中,我们可以通过三个具体项目来深入理解这两个技术的应用。 首先,"js图片轮播:VCD包装...

    html5+css3源代码

    这个"html5+css3源代码"压缩包中,你将能找到各种实际应用的代码示例,包括但不限于上述提到的HTML5新特性及CSS3的新功能。通过研究和实践这些例子,初学者能够快速掌握这两门技术的基本用法,并逐步进阶到更高级的...

    html5+css3+JS代码

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

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

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

    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源码.rar

    Canvas火焰喷射动画效果,CSS3垂直图标菜单 带Tooltip提示框,CSS3多样式小图标按钮 带分享按钮,CSS3可视化网页编辑器 基于tinymce编辑器,CSS3实现一款联系表单 输入框带小图标,HTML5 Canvas模拟衣服撕扯动画 ...

    疯狂html5 CSS3 JavaScript讲义

    《疯狂HTML5 CSS3 JavaScript讲义》是一本深入浅出的Web前端开发入门教程,由知名作者李刚编著。这本书全面涵盖了HTML5、CSS3和JavaScript这三个现代Web开发的核心技术,旨在帮助初学者快速掌握网页设计与开发的基础...

    HTML5+CSS3学习总结.docx

    HTML5+CSS3 学习总结 HTML5 是万维网的核心语言、标准通用标志语言下的一个应用超文本标志语言(HTML)的第五次重大修改,作为 HTML 语言,具有新的元素、属性和行为。广义的 HTML5 是 HTML5 本身 + CSS3 + ...

Global site tag (gtag.js) - Google Analytics