css属性

这是我看官方文档收集整理的一些css属性，分享一下

CSS属性划分和前缀标准写法顺序

CSS3 被划分为模块，其中最重要的 CSS3 模块包括

选择器

框模型

背景和边框

文本效果

2D/3D 转换

动画

多列布局

用户界面

CSS3属性前缀和标准写法顺序

Trident内核：前缀为-ms ，主要代表为IE浏览器

Gecko内核：前缀为-moz，主要代表为Firefox

Presto内核：前缀为-o，主要代表为Opera

Webkit内核：前缀为-webkit，产要代表为Chrome和Safari

CSS3常用属性之border-radius圆角

设置或检索对象使用圆角边框

提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、e下左(bottom-left)的顺序作用于四个角。

垂直半径也遵循以上4点。

取值情况

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

CSS3常用属性之box-shadow盒子阴影

设置或检索对象阴影

none： 无阴影

length ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值

length ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

length ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

length ④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值

color： 设置对象的阴影的颜色。

inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

CSS3常用属性之text-shadow文字阴影

设置或检索对象中文本的文字是否有阴影及模糊效果

none： 无阴影

length ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值

length ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

length ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

color ： 设置对象的阴影的颜色

CSS3常用属性之linear-gradient线性渐变

语法: 可以使用角度或者关键字；

background: linear-gradient(direction, color-stop1, color-stop2, …)

background: linear-gradient(angle, color-stop1, color-stop2);

CSS3常用属性之背景新增属性

background-origin属性的详解

设置或检索对象的背景图像计算 background-position 时的参考原点(位置)

padding-box： 从padding区域（含padding）开始显示背景图像。

border-box： 从border区域（含border）开始显示背景图像。

content-box： 从content区域开始显示背景图像。

background-clip属性的详解

指定对象的背景图像向外裁剪的区域

padding-box： 从padding区域（不含padding）开始向外裁剪背景。

border-box： 从border区域（不含border）开始向外裁剪背景。

content-box： 从content区域开始向外裁剪背景。

text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

p{width:200px;height:200px;margin:0;padding:20px;border:10px dashed #666;background:#aaa url(img.jpg) no-repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}

从前景内容的形状作为裁剪区域向外裁剪背景

background-size属性的详解

检索或设置对象的背景图像的尺寸大小。

该属性提供2个参数值(特性值cover和contain除外)。

如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。

如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

取值：

length：用长度值指定背景图像大小。不允许负值。

percentage：用百分比指定背景图像大小。不允许负值。

auto： 背景图像的真实大小。

cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

CSS 容器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。