CSS3的几个标签速记3

html-css017

CSS3的几个标签速记3,第1张

border-radius:CSS3圆角 语法:border-radius:25px椭圆边角:语法-border-radius:xx%或者15px/100px

box-shadow:CSS3盒阴影 语法:box-shadow:5px 5px 10px #eee

border-image:使用图像创建一个边框 语法:boder-image:url(xx.xxx) 30 30 round round是平铺、stretch是拉伸

background-size:自定义设置背景图片的大小 语法:background-size:--px --px背景图片完全填充background-size:100% 100%;

background-origin:指定了背景图像的位置区域 border-box padding-box content-box

CSS3允许多个背景图片:background-image:url(img_flwr.gif),url(img_tree.gif)

CSS3渐变

linear-gradients:线性渐变 语法:background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)

使用透明度transparency 语法:linear-gradients(to right,rgb(255,0,0,0),rgb(255,0,0,1))

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。

radial-gradients:径向渐变 语法与linear-gradients一样,这里不重复。

text-shadow:文本阴影 语法:text-shadow:--px --px --px #eee

word-wrap:break-word如果某个单词过长溢出文本框,此标签强制换行

以上是互联网用户为您的的内容,在阿里云内部有更多的关于CSS3的几个标签速记1 - html/css语言栏目:html.css的内容,欢迎继续使用右上角搜索按钮进行搜索标签、以便于您获取更多的相关信息。

CSS(Cascading Style Sheets )叫层叠样式表,用于修饰HTML文档样式;CSS3是CSS2的升级版本,由CSS权威组织在css2的基础之上新增了很多功能和标准,让各大浏览器厂商去实现。但是由于各浏览器出于各种原因,导致对各个功能的实现的时间是参差不齐的,这就导致有些浏览器先实现,有些浏览器后实现,甚至有些浏览器没实现;先实现的浏览器将已经实现的功能做个特殊的标记,表示这个功能是我的私有属性,其他浏览器用不了;而接着如果第二个浏览器也实现了这个功能,它也加一个自己的特殊标记,以此类推,到最后面所有浏览器厂商都实现了该功能。这个时候某个浏览器厂商的人可能就想到,这个功能大家都实现了那这也不算是我的私有属性了,那我就支持不加自己特殊标记的写法吧,接着第二个厂商看到,哟呵是哦大家都实现了,那我也支持不加自己特殊标记的写法,以此类推,到最后大家都支持不加自己特殊标记的写法了,这就是一个属性从开始定义到兼容一些浏览器到兼容所有浏览器的过程。这个过程,甚至到现在很多属性和功能都是在上述的发展着。

所以正是浏览器厂商对CSS3新增功能的实现时间参差不齐,导致了CSS3属性各种各样不兼容的问题。

那如何解决兼容性紊乱的问题呢?

方法一:查文档查手册

下面是两个最常用的两个网址caniuse和CSS手册:

当我们要用某个属性的时候,就去上面两个网址查找该属性的兼容性,对应你要兼容到的浏览器版本,对应的加上前缀之类的操作,如columns:

小结一下,各主流浏览器常加的特殊标记:

1. Safari/Chrome: -webkit-

2. IE:-ms-

3. Firefox:-moz-

4. Opera:-o-

方法二:使用后处理器比如autoprefixer插件自动补齐前缀

这里简单讲一下后处理器和预处理器

注意:cssNext和autoprefixer依赖于postCss

postCss的本质是用js实现的CSS的抽象语法树(AST : Abustract Syntax Tree)

说白了postCss就像一个插槽一样,剩下的具体事情留个其他插件来做了,cssNext和autoprefixer就是它其中的两个插件