css3新增属性总结1
来源:互联网 发布:google pixel手机 知乎 编辑:程序博客网 时间:2024/06/16 12:09
边框属性: border-radius(圆角),box-shadow(阴影),border-image(图片边框)
圆角:border-radius:50%/50px 可用%或者像素
阴影: box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 颜色 inset/outset内外阴影
图片边框 :border-image:url(1.png) 30 30 round ;
依次为 border-image-source 边框图片路径,border-image-slice 边框向内偏移,border-image-width 边框宽度,
border-image-outset 图像区域超出边框的量,border-image-repeat 平铺 repeated/铺满 rounded/拉伸stretched
背景:background-size(背景图片尺寸),background-origin(背景图片定位区域),background-clip(背景的绘制区域)
背景尺寸:background-size:px/% ;px尺寸是图片的实际尺寸 ,%尺寸相对于父元素的宽度和高度。
背景区域:background-origin:padding-box/border-box/content-box;(相对于内边框/边框盒子/内容框定位)
背景绘制:background-clip:padding-box/border-box/content-box;(背景被裁剪到内边距框/边框盒子/内容框)
文本效果:text-shadow(文本阴影),word-wrap(强制文本换行),text-wrap(换行规则)
文本阴影:text-shadow:水平 垂直 模糊 颜色
强制换行:word-wrap:normal/break-word(断点字换行/长单词强制换行)
换行规则:text-wrap:normal/none/unrestricted/suppress
normal:只在允许的换行点进行换行。
none:不换行,元素无法容纳的文本会溢出。
unrestricted:在任意两个字符间换行。
suppress:压缩元素中的换行
3D转换:transform:rotate/translate/scale/skew/matrix
rotate角度转换允许负值 transform:rotate(30deg) 分rotateX,rotateY
translate位置移动 transform:translate(left,top) 分transformX,transformY
scale元素尺寸成倍分改变transform:scale(宽倍分,高倍分) 分scaleX,scaleY
matrix所有2D组合 六个参数(数学函数,允许您:旋转,放缩,移动,倾斜)
过渡动画:transition:width 1s linear 2s,height 1s linear 2s
依次为:transition-property:width 过渡的属性名 transition-duration:1s 过渡效果花费的时间
transiton-timing-function 过渡效果的曲线默认ease transition-delay:过渡何时开始默认0
@keyframes规则
解释依次为:animation-name:myfirst 动画的名称 animation-duration:5s 完成所花费的时间
animation-timing-functiom:linear 动画的曲线 animation-delay:2s 动画何时开始
animation-iteration-count:infinite 动画播放次数(循环) animation-direction:alternate按原动画逆向播放
animation-play-state动画是否运行或暂停 animation-fill-mode 对象动画时间之外的状态
- css3新增属性总结1
- CSS3新增属性总结
- 1-6:css3新增的属性
- CSS3-新增属性选择器
- [CSS3] 新增属性
- css3 新增属性
- css3 新增属性集合
- CSS3 新增文本属性
- CSS3新增颜色属性
- css3新增属性
- CSS3新增的属性
- CSS3新增基础属性
- 【8】CSS3新增属性
- CSS3新增文本属性
- css3.0新增属性
- CSS3新增属性
- CSS3新增常用属性
- CSS3新增属性
- unity中简单实用protobuf(Protobuf-net)
- iOS 强制横屏的方法
- 网页_访问(WinInet)和网页_访问_对象(WinHttp)两种方式在cookie方面的差异
- 解决:Failure to find org.apache.maven.plugins:maven-surefire-plugin:pom:2.10 这样的问题
- Mac系统终端命令行不执行命令 总出现command not found解决方法
- css3新增属性总结1
- Ext.query与Ext.select 的用法
- 5种方法提高网站的登录框设计体验
- (28)单链表的两种反转方法
- 架构漫谈(八):从架构的角度看如何写好代码
- router配置
- 迭代法计算平方根(难度系数:2颗星)
- Codeforces 369E Valera and Queries【逆向思维+离线+树状数组】好题!好题!好题!
- Jetson TX1开发笔记(三):开发利器-Nsight Eclipse Edition