CSS3
来源:互联网 发布:模型制作 软件 编辑:程序博客网 时间:2024/06/06 00:14
1.新的边框属性
border-image 用图片做边框
border-image:url(border.png) 30 30 round;//round(铺满)stretch(拉伸)-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */
border-radius 圆角边框
border-radius:25px;//也可以写成%border-radius: 2em 1em 4em / 0.5em 3em;//相当于border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
box-shadow 添加一个或多个阴影
box-shadow: 10px 10px 5px #888888;//右(负数为左),下(负数为上),羽化程度,颜色
2.背景图片的设置
div{//background-size 属性:背景图片的尺寸 background:url(bg_flower.gif);//可以多张图片逗号隔开 -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; //background-size:40% 100%; background-repeat:no-repeat;}
background-clip:content-box; //border-box,padding-box规定绘制区域background-origin:content-box;//规定图片区域
3.新的文本属性
hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
4.CSS3 字体
在 CSS3 之前,必须使用已在用户计算机上安装好的字体。通过 CSS3,可以使用任意字体。
<style> @font-face{ font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}div{ font-family:myFirstFont;}</style>
font-family:name 必需,规定字体的名称。
src:url(’ ‘) 必需,定义字体文件的 URL。
font-stretch :normal/condensed/ultra-condensed……可选,定义拉伸字体
font-style:normal/italic/oblique 可选,定义字体的样式。默认是”normal”
font-weight:normal/bold/100/200……可选,定义字体的粗细
unicode-range 可选,定义字体支持的 UNICODE 字符范围。默认是”U+0-10FFFF”
5.2D 转换
transform:translate(50px,100px) //位移
transform:rotate(5deg) //正数顺时针旋转,负数逆时针
transform:scale(2,4) //元素尺寸,倍数
transform:skew(30deg,20deg) //围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度
transform:matrix(2,0.5,-0.5,2,50,50)//其他的不可同时使用所以用matrix使用所有变换(2,2)scale,(50,50)translate,(0.5,-0.5)skew
6.3D 转换
Internet Explorer 10 和 Firefox 支持 3D 转换
Chrome 和 Safari 需要前缀 -webkit-
Opera 仍然不支持 3D 转换(它只支持 2D 转换)
rotateX()
rotateY()
7.过渡
需要定义两个样式,从一个变为另一个
div{ width:100px; height:100px; background:yellow; transition:width 2s;//变宽度,时间2s。可以添加多个属性,由逗号隔开 -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */}div:hover{ width:200px;}
transition: width 1s linear 2s;
transition-property 规定应用过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间。默认是 0
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”
transition-delay 规定过渡效果何时开始。默认是 0
8.动画
@keyframes myfirs{ from {background: red;} to {background: yellow;}}@keyframes mysecond//不同浏览器记得前缀 -webkit-keyframes chrome...{ 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}div{ animation: myfirst 5s; animation-iteration-count:3;//播放次数 infinite无限 animation-timing-function:linear;//从开头到结尾以相同的速度来播放 animation-delay:2s; animation-direction: normal|alternate;//轮流正反方向播放 animation-play-state: paused|running; //animation: name duration timing-function delay iteration-count direction;可以都写在一起除了state}
9.多列
div{ column-count:3; column-gap:40px; column-rule:3px outset #ff0000;//列规则 ...还有一些其他属性}
10.界面
appearance 允许您将元素设置为标准用户界面元素的外观
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。
icon 为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down 规定在使用 arrow-down 导航键时向何处导航。
nav-index 设置元素的 tab 键控制次序。
nav-left 规定在使用 arrow-left 导航键时向何处导航。
nav-right 规定在使用 arrow-right 导航键时向何处导航。
nav-up 规定在使用 arrow-up 导航键时向何处导航。
outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
resize 规定是否可由用户对元素的尺寸进行调整,both高度和宽度,horizontal可调整宽度,vertical高度
- css3
- css3
- css3
- css3
- css3
- css3
- CSS3
- CSS3
- css3
- CSS3
- css3
- css3
- CSS3
- css3
- css3
- css3
- css3
- css3
- 读(Android开发艺术探究)view 的滑动 (一)
- java-微信公众号充值
- OpenCV学习--saturate_cast防止数据溢出
- 鼓励自己
- display:none与visible:hidden的区别
- CSS3
- 使用注解来构造IoC容器
- hdu1174(点到直线的距离)
- 杭电HDU 1004 Let the Balloon Rise AC代码 简单题
- java汉字首字母提取
- React学习(六)PropTypes
- react native 组件汇总整理,点击链接至GitHub
- 服务机器人其最大的问题:定位导航
- 一维数组 冒泡排序 shell 排序 二分查找 C++