css 一些好玩的属性,推荐一些比较有用的css3新属性
css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准。我并不是专门在做前端的,只是有时不得不自己去写这些东西,有时喜欢研究研究这些,所有以上只是我的个人看法。
1、在之前我想在页面做出一个边框为圆角框,貌似需要写挺多css代码的(可能我没了解到更好的办法),在css3里有一个属性创建圆角是非常容易的,设置好角度也可以创建一个圆
border-radius:
css代码:
复制代码代码如下:
#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}
html代码:
复制代码代码如下:
2、CSS3 边框阴影,之前我都是直接利用图片做背景实现的效果,用css3中的box-shadow属性也可以做到
box-shadow:
css代码:
复制代码代码如下:
#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}
html代码:
复制代码代码如下:
3、css3 支持背景图片可以用多张图片
CSS3 多重背景图片
复制代码代码如下:
.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
4、text-overflow 属性规定当文本溢出包含元素时发生的事情。
此属性支持切断容器中的文本,当文本溢出可以给出了一个省略号的特性。
复制代码代码如下:
.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;
}
5、过渡效果,通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
效果用贴图比较难体现出来,有兴趣自己运行下面代码:
复制代码代码如下:
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 */
}
css 一些好玩的属性,推荐一些比较有用的css3新属性相关推荐
- 从零开始学前端:css3新属性scss和less --- 今天你学习了吗?(CSS:Day22)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录 从零开始学前端:程序猿小白也可以完全掌握!-今 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- 前端基础8:HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签 标签名 描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
- “约见”面试官系列之常见面试题第三十七篇之CSS3新属性(建议收藏)
目录 CSS3 结构(位置)伪类选择器(CSS3) 目标伪类选择器(CSS3) 属性选择器(CSS3) 伪元素选择器(CSS3,重要) CSS3盒模型(重要) 颜色模式 盒子阴影(CSS3) 文本阴影 ...
- 运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- CSS3新属性:在网站中使用访客电脑里没有安装的字体
CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的! ...
- Css3新属性:calc()
一.前言 calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在 ...
- css3新属性partA
1.新的选择器 其实大家可以预感到,css3的出现一定会给大家带来更加powerful的选择器,我自称为正则选择器: 如果我们现在有5个li标签,但是每个li标签都要求有不同的背景颜色.传统的做法有两 ...
最新文章
- docker mysql 生产环境_Docker构建MySQL环境
- HP小型机superdome配置MC双机、PV、VG、LV初体验
- Python:判定IP地址合法性的三种方法
- Django的外键创建
- DotNet4应用程序打包工具(把DotNet4安装程序打包进你的应用程序;WINAPI开发,无dotNet环境也可顺利执行)【一】整体思路...
- JavaSE_04异常处理
- 《Java程序员全攻略:从小工到专家》连载八:加入什么样的公司
- Android 获取天气数据
- 表单的默认提交方式_对于PHP表单提交有哪集中方式讲解
- 自考运筹学第三章课后题
- 小米笔记本bios版本大全_初级用户应该学习的BIOS知识
- 零基础学启发式算法(6)-蚁群算法 (Ant Colony Optimization, ACO)
- Openfire搭建聊天系统
- 2018/3/9 省选模拟赛 0分
- 电子教室软件 android,超越电子教室
- 能源行业的作业成本法管理
- ORACLE RAC 11.2.0.4 一节点出现Suspending MMON slave action kewrmrfsa_ for 82800 seconds
- web程序中的用户注册
- 跟着Code走,详解Symbian Client/Server架构
- frida 挂钩_您必须知道的预提交挂钩
热门文章
- [ JAVA编程 ] double类型计算精度丢失问题及解决方法
- iOS:解决pod的Insecure world writable dir问题
- tomcat端口修改后在Eclipse中启动无效问题解决
- 【问题解决方案】The MathType Dll cannot be found 问题解决方案
- 基于商品包含关系的飞猪搜索优化实践
- 速成pytorch学习——2天
- leetcode力扣406. 根据身高重建队列
- FLOATER:更加灵活的Transformer位置编码!
- vscode代码提示只显示一行_模型秒变API只需一行代码,支持TensorFlow等框架
- 七年级计算机与信息安全教案,计算机与信息安全教案.docx