推荐一些比较有用的css3新属性


Posted in HTML / CSS onNovember 11, 2014

css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准。我并不是专门在做前端的,只是有时不得不自己去写这些东西,有时喜欢研究研究这些,所有以上只是我的个人看法。

1、在之前我想在页面做出一个边框为圆角框,貌似需要写挺多css代码的(可能我没了解到更好的办法),在css3里有一个属性创建圆角是非常容易的,设置好角度也可以创建一个圆

border-radius:

推荐一些比较有用的css3新属性

css代码:

复制代码
代码如下:

#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}
</style>

html代码:

复制代码
代码如下:

<body>
<div>border-radius 做圆角的例子。</div>
</body>


2、CSS3 边框阴影,之前我都是直接利用图片做背景实现的效果,用css3中的box-shadow属性也可以做到

box-shadow:

推荐一些比较有用的css3新属性

css代码:

复制代码
代码如下:

#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}

html代码:

复制代码
代码如下:

<body>
<div></div>
</body>

3、css3 支持背景图片可以用多张图片

CSS3 多重背景图片

推荐一些比较有用的css3新属性


复制代码
代码如下:

.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>

4、text-overflow 属性规定当文本溢出包含元素时发生的事情。

此属性支持切断容器中的文本,当文本溢出可以给出了一个省略号的特性。

推荐一些比较有用的css3新属性

推荐一些比较有用的css3新属性


复制代码
代码如下:

.test3 {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}
#test3:hover {
white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}
</style>
</head>
<body>
<div>当这里显示的内容溢出是会有省略号,鼠标移到文本上面会显示所有内容</div>
</body>

5、过渡效果,通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

效果用贴图比较难体现出来,有兴趣自己运行下面代码:

复制代码
代码如下:

<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* 可以支持Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* 可以支持Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* 可以支持Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
-webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
-o-transform:rotate(180deg); /* 可以支持Opera */
}
</style>
</head>
<body>
<div>把鼠标放上该区域,来查看过渡效果。</div>
</body>
HTML / CSS 相关文章推荐
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 #HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 #HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 #HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 #HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 #HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 #HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 #HTML / CSS
You might like
PHP资源管理框架Assetic简介
2014/06/12 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python全栈知识点总结
2019/07/01 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python如何对齐字符串
2020/07/30 Python
Python如何输出百分比
2020/07/31 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
中专自荐信
2013/10/13 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android