css3常用属性之表现型
css3的使用已经分布在各种网站上,其用途对于前端开发人员来说有很大的帮助,比如之前的圆角矩形,需要使用背景图片来完成,现在只需使用border-radius:5px;便可以做出圆角边框的效果,今天来记录下css3一些常用的属性。
本文来源:www.liteng.org如需转载请注明出处。否则将追究法律责任
版权归作者和博客园所有,请友情转载。
盒子属性:边框圆角:radius,边框阴影:box-shadow
边框:border-radius:top-left top-right bottom-right bottom-left;
这里先赘述一下盒子边框样式设计的先后顺序
border-radius:10px;
border-top-left-radius:10px;
盒子阴影 box-shadow:h-shadow v-shadow blur color inset/outset
默认是外阴影outset
box-shadow:5px 5px 5px red;
box-shadow:5px 5px 5px red inset;
当然可以设置多个阴影只需在之后面加','。
box-shadow:5px 5px 5px red inset,-5px -5px 5px green;
转换2D/3D:transform:rotate,scale,skew
浏览器的支持:IE10,firfox,opera
为了达到各个浏览器的兼容性.请使用一下方法
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
transform:rotate(45deg);
目前范围仅仅在2d,所有先上2d示例
transform:rotate(Xdeg)定义角度旋转
transform:rotate(45deg)
transform:rotate(Xdeg)定义角度旋转
实用性那就智者见智了。
transform:scale(x):缩放参数为缩放的倍数
注:指在原基础的x,y方向缩放
skew() 方法
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
css3的动画:animate
animation:myanimation 5s linear infinite;(指定的帧名,执行的时间间隔,效果,执行次数)
<div style="height: 100px; width: 100px; text-align: center; border: 4px solid rgb(0, 0, 255);animation:myanimation 5s linear infinite;">animation:myanimation 5s linear infinite</div><p> <style type="text/css">@keyframes myanimation{0%{background-color:red; }50%{background-color:green; }100%{transform:rotate(720deg);border-radius:50%;background-color:gray; }} </style>
本人来源:www.liteng.org如需转载请注明出处。否则将追究法律责任
版权归作者和博客园所有,请友情转载。
动画执行效果:linear:匀速,ease:匀加速,ease-in:减速开始,ease-out:减速结束 ,ease-in-out:减速开始减速结束。
原文地址:http://liteng.org/node/56
更多效果:url:http://2.liteng.sinaapp.com/HTML5/index.html
下篇将记录css3选择器的使用方法
转载于:https://www.cnblogs.com/leeten/p/4180055.html
css3常用属性之表现型相关推荐
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- HTML+CSS+JavaScript复习笔记持更(七)——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
- HTML+CSS+JavaScript复习笔记持更(十)——CSS3常用属性之定位
定位 定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
- HTML+CSS+JavaScript复习笔记持更(九)——CSS3常用属性之盒模型
盒模型 盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性 内边距:padding 外边距:margin 边框:bord ...
- HTML+CSS+JavaScript复习笔记持更(六)——CSS3常用属性之文本
文本相关 文本相关,包含了文字样式和文本换行等格式 文字 文字是一个网页最基础的部分,文字主要有以下几种属性: 字体 文字大小 文字颜色 水平对齐方式 段首缩进方式 语法格式: <!DOCTYP ...
- HTML+CSS+JavaScript复习笔记持更(八)——CSS3常用属性之列表
列表属性 之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
- CSS3常用属性及用法
1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome ...
- CSS3 常用属性
1------border-radius (盒子圆角 border-radius :border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 2------如果将一个正方形 ...
- Html5和Css3的基础标签及常用属性
H5 H5的常用标签及属性: 新增和废弃 新增的结构(布局) 标签:section.artcle.nav.footer.header.hgroup.Aside.figure 新增的其他标签: Vide ...
最新文章
- Switch入门第一讲
- IDC最新报告:阿里语音AI登顶中国No.1
- wine on ubuntu linux, and source insight 绿色版的安装
- MySQL修改和删除索引(DROP INDEX)
- Creating Your First Blockchain with Java. Part 1.
- java通过按钮打开新窗口_如何在java程序中,当点击一个按钮后,关闭当前窗口,开启一个新的窗口。...
- Linux下部署Tomcat项目笔记
- java删除list元素的几种方式
- 在 VC6 中使用 GdiPlus-安装
- 什么是java枚举_什么是java枚举
- 用C语言程序实现黎曼和求定积分
- 计算机信息数据集通信的概念,南京信息工程大学数据通信与计算机网络复习题库.doc...
- [转]Java web 开发 获取用户ip
- Android重拾设计模式系列——简单工厂模式
- 深度学习图像分类数据集制作
- sh报错segmentation fault
- 移位寄存器——数电第六章学习
- 跌破150美元、市值蒸发3600亿美元,这个圣诞节苹果过得“太冷了”!
- 拼多多店铺如何快速装修?
- 【C语言编程】简单密码
热门文章
- (20190117)GBT 18314-2009 全球定位系统(GPS)测量规范
- 【CF337D】邪恶古籍-树状dp
- [论文阅读] 《Compiling ONNX Neural Network Models Using MLIR》
- 蛋白质结构预测---蛋白质残基的基础知识(一)
- DPDK原理探索: igb_uio
- PCIE——第7章——PCIe 总线的数据链路层与物理层
- 在成长湾让孩子体验各种梦想
- 方德系统突然启动不了,出现提示initramfs>
- DP83TG720SWRHARQ1 IC TRANSCEIVER 接口芯片、TCAN1051VDRBTQ1
- P30很重要,承担着华为冲击高端手机市场的重任