css2与css3的区别
css2与css3的区别
CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结:
animation(基础动画)eg: div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}background-clip(规定背景的绘制区域)eg: div
{background-clip:content-box;
}background-origin(
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。
比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透明的,不然它会覆盖住背景)
background-clip:border|padding|content
该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
background-origin:padding|border|content
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了
)
background-size(背景大小)
border-radius
(圆角)eg:向 div 元素添加圆角边框:
div
{
border:2px solid;
border-radius:25px;
}border-image
(边框图片)box-decoration-break({ box-decoration-break: sBreak } 可能的值 sBreak 一个字符串,用于指定以下值之一 slice 默认值。不会针对整个方框呈现 border 、 padding 、 box-...)
box-shadow(阴影)
box-sizing(
规定两个并排的带边框的框:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
})columns
(规定列的宽度和列数:
div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
})
clear-after(清除浮动)
flex
(定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素:
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
border:1px solid red;
} #p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
border:1px solid blue;
})
font-stretch(
让所有的div元素的文本更宽:
div { font-stretch: expanded; })
font-size-adjust(
通过指定font-size-adjust属性,浏览器将调整字体大小,无论字体系列("宋体"性质值0.58):
div { font-size-adjust: 0.58; })
font-synthesis(
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。
首先我们一起来看看@font-face的语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
})
font-kerning(适用于在字体中以代码形式进行字符对间距调整p {
font-kerning: none;
})font-variant-caps(设置小型大写字母的字体显示文本,)
hanging-punctuation(目前主流浏览器都不支持 hanging-punctuation 属性。
在 p 元素首行的开始边缘之外放置一个标点符号:
p
{
hanging-punctuation:first;
})
hyphens(设置如何对单词进行拆分,以改善段落的布局)
icon(css3实现Icon UI图标)
image-resolution(规定图像的正确分辨率)
image-orientation(目前只有 Firefox26 支持这个让图片旋转的 css 属性)
line-break(
在恰当的断字点进行换行:
p.test {word-break:hyphenate;}
)
object-fit(
object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。如下所示:
img {
height: 100px;
width: 100px;
object-fit: contain;
object-position: top 75%;
})
object-position(
object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。如下所示:
img {
height: 100px;
width: 100px;
object-fit: contain;
object-position: top 75%;
})
opacity(透明度)
outline-offset(
规定边框边缘之外 15 像素处的轮廓:
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
})
overflow-wrap
/word-wrap(
允许长单词换行到下一行:
p.test {word-wrap:break-word;}
)
backface-visibility(
隐藏被旋转的 div 元素的背面:
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
})
perspective(
设置元素被查看位置的视图:
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
})
perspective-origin(
设置 3D 元素的基点位置:
div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
})
pointer-events
(CSS新属性pointer-events:字面理解是点击鼠标事件,值分别是auto和none。
当使用pointer-events:none,表示它将捕获不到任何点击,而只是让事件穿透到它的下面。代码如下:
<style>
.overlay {
pointer-events: none;
}
</style> <div id="overlay" class="overlay"></div>)
resize(重置)
tab-size(检索或设置对象中的制表符的长度。)
text-align-last(设置或检索对象中内容的水平对齐方式)
text-decoration-line(检索或设置对象中的文本装饰线条的位置。
text-decoration-skip(设置对象中的文本装饰线条的形状)
text-decoration-position(
text-decoration-color:<color>
- <color>:
- 指定颜色。
检索或设置对象中的文本装饰线条的颜色text-decoration-style(
text-decoration-style:solid | double | dotted | dashed | wavy
默认值:solid
取值:
- solid:
- 实线
- double:
- 双线
- dotted:
- 点状线条
- dashed:
- 虚线
- wavy:
- 波浪线
说明:
检索或设置对象中的文本装饰线条的形状。- 对应的脚本特性为textDecorationStyle。
)
text-emphasis
(目前主流浏览器都不支持 text-emphasis 属性。
text-emphasis 属性是简写属性,用于在一个声明中设置 text-emphasis-style 和 text-emphasis-color。
)
text-justify(
齐行改变单词间的间隔:
div
{
text-align:justify;
text-justify:inter-word;
})
text-overflow(文本溢出隐藏)
transform(
旋转 div 元素:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
})
transform-style(
使被转换的子元素保留其 3D 转换:
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
})
text-shadow(
基础的文本阴影效果:
h1
{
text-shadow: 5px 5px 5px #FF0000;
})
transition
(把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
})
word-break(
在恰当的断字点进行换行:
p.test {word-break:hyphenate;}
)
word-spacing(
规定段落中的字间距是 25 像素:
p
{
word-spacing:25px;
})
writing-mode(设置文本的垂直显示)
css2与css3的区别的更多相关文章
- 小结css2与css3的区别
CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg: div{animation: myfirst 5s linear 2s infinite a ...
- 小强的HTML5移动开发之路(4)——CSS2和CSS3
来自:http://blog.csdn.net/dawanganban/article/details/17653149 在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- 那些熟悉又陌生的 css2、css3 样式,持续复习
initial关键字: 除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial ...
- D3之svg transform 与 css3 transform 区别与联系
D3就不用多介绍了,在数据可视化界属于大佬级别的js库.在这里主要想记录一下在写程序期间遇到的一个问题. 如下图所示,想完成主视图在小地图上的映射,小地图的白色矩形框用来代表当前主视图可见区域,主视图 ...
- 小程序wxss和css3的区别
经过设置发现,微信小程序中wxss并不能完全支持css3的全部功能. 总结记录在此文中,以免忘记. 0 . wxss不能直接通过css3中的background-image属性来设置显示的背景图片. ...
- CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)
选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...
- 【css2、css3】css改变select选择框的样式
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS3初步
一.CSS与CSS3的区别 非常简单,CSS代表"Casading Style Sheets",就是样式表,是一种替代并为网站添加样式的标记性语言.现在所使用的CSS基本是在199 ...
随机推荐
- ICT工作的思考<两>
2周奋战.我负责的LB昨天完成了最后一个模块.最后20日. 一周早于预期,经理说,出乎他的意料.So 奖励表,昨日,管理人员与我们合作,吃烧烤补补身子.我只想说,最后一个喘息. 这两周的生活确挺忙碌的 ...
- Django架设blog步骤(转)
最近在研究Python,起初是因为想做个爬虫,昨天看了点基础教程,台湾辅仁大学的视频,了解了python的语法规范及语言特性,主要有三: 1.动态脚本语言: 2.语法简洁,强制缩进: 3.应用广泛,w ...
- Android剪裁图片简单的方法
/** * 按正方形裁切图片 */ public static Bitmap ImageCrop(Bitmap bitmap) { int w = bitmap.getWidth(); // 得到图片 ...
- HTML DOM nodeName nodeValue
在javascript在,我们得title在标签和文本,它们通常要求这样做 var obj =document.getElementsById("id1"); obj.nodeNa ...
- 惊人go语言(image网站开发)
[ 声明:版权全部,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 有过python web开发经验的朋友.相信对它的便利性肯定印象很深刻. 事实上利用go语言对 ...
- NSIS:制作软件升级安装包
原文 NSIS:制作软件升级安装包 相信不是每个人写的软件都只发布一次就可以了,肯定要有修改和维护的情况发生.在这种情况下,您可能就需要一个软件的升级安装包了. 现在,我们就来一步步把这个安装包做 ...
- android 推断应用程序是系统程序还是用户程序
直接上代码: AppInfo.java <span style="font-size:18px;">package com.example.packages; publ ...
- VS2008让自己掌控的定义编译项目后,自己主动添加到工具箱
在VS2008中,假设在项目里写了一个用户控件.编译后这个控件是不会自己主动出现到工具箱的.按例如以下设置就能够解决问题 工具=>选项=>Windows窗口设计器=>常规=>A ...
- Android FM学习中的模块 FM启动过程
最近的研究FM模,FM是一家值我正在学习模块.什么可以从上层中可以看出. 上层是FM按钮的操作和界面显示,因此调用到FM来实现广播收听的功能. 看看Fm启动流程:例如以下图: 先进入FMRadio.j ...
- SAE+Java+jetty
SAE的java执行环境jetty如servlet该容器,和开放几乎完全访问.有效支持各种jar包.但对于jdk的要件的版本号是非常严格格,这里的版本号是jdk1.6 SAE利用上传war该方式配置j ...