最新CSS3常用属性大全
css3简介及引用的三种方式
css3简介及引用的三种方式CSS3 是 CSS（层叠样式表）的最新版本，它在 CSS2 的基础上进行了扩展和改进，增加了许多新的特性和功能。
CSS3 的目标是提供更加丰富和灵活的样式控制，以满足现代网页设计和开发的需求。
CSS3 引入了许多新的特性，例如：- 盒模型：CSS3 引入了新的盒模型，包括边界半径、盒阴影和媒体查询等。
- 动画：CSS3 提供了各种动画效果，例如平移、旋转和缩放等。
- 变形：CSS3 允许对元素进行变形操作，例如倾斜和扭曲等。
- 字体：CSS3 提供了更多的字体控制选项，包括字体样式、字体家族和字体大小等。
- 颜色：CSS3 增加了对颜色的更多控制，包括RGB、HSL 和透明度等。
CSS3 的引用方式有以下三种：1. 内联样式：将 CSS 样式直接嵌入到 HTML 元素的标签中，使用`style`属性。
例如：```html<p style="color: red;">这是内联样式</p>```2. 内部样式表：将 CSS 样式代码写在 HTML 文件的`<style>`标签中。
例如：```html<style>p {color: red;}</style>```3. 外部样式表：将 CSS 样式代码保存为一个独立的文件（.css 扩展名），然后在 HTML 文件中使用`<link>`标签引入。
例如：```html<link rel="stylesheet" type="text/css" href="styles.css">```其中，外部样式表是最常用的方式，因为它可以实现样式的重用和维护。
你可以在多个HTML 文件中引用同一个外部样式表，从而保持整个网站的样式统一。
CSS3 的出现使得网页设计更加丰富多彩，同时也提高了开发效率和用户体验。
菜鸟教程css3
菜鸟教程css3菜鸟教程CSS3CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，是一种用于描述网页样式和布局的技术。
与CSS2相比，CSS3拥有更多的新特性和功能，可以让开发者更加灵活地控制网页的外观和交互效果。
无论是在移动端还是在桌面端，CSS3都被广泛应用于网页开发中。
下面将介绍CSS3的几个重要特性和用法。
1. 选择器CSS3引入了一些新的选择器，让开发者可以更精确地选择网页中的元素。
比如：属性选择器（Attribute Selectors）允许根据元素的属性值选择元素；伪类（Pseudo-classes）可以根据元素的状态或位置选择元素；伪元素（Pseudo-elements）可以创建某些元素的特定部分。
2. 盒子模型CSS3中的盒子模型（Box Model）得到了进一步的增强。
开发者可以通过box-sizing属性来控制元素的尺寸计算方式，可以选择使用content-box（默认）或者border-box。
此外，CSS3还引入了弹性盒子布局（Flexible Box Layout）和网格布局（Grid Layout），使得网页布局更加灵活和响应式。
3. 文本效果CSS3中提供了一系列的文本效果特性，可以使得网页中的文字更加生动和丰富。
比如：text-shadow可以为文本添加阴影效果；text-overflow可以控制文本超出容器时的显示方式；word-wrap可以实现自动换行；@font-face可以引入自定义的字体等。
4. 渐变和渲染CSS3中引入了线性渐变（linear gradient）和径向渐变（radial gradient）两种新的渐变方式，可以用来创建更加丰富的背景和图形效果。
此外，CSS3还提供了多种渲染方式，比如：盒子阴影（box-shadow）、边框图像（border-image）和文本轮廓（text-outline）等。
5. 过渡和动画过渡（Transition）和动画（Animation）是CSS3中用于实现元素变化效果的重要特性。
css3 手册所有
css3 手册所有一、引言CSS（层叠样式表）是一种用于描述文档样式的标记语言，具体包括字体、颜色、布局等方面的样式定义。
CSS3是CSS的最新版本，是Web开发中常用的样式定义语言之一。
本手册将详细介绍CSS3的各项属性及其使用方法。
二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一，通过元素名称来选择文档中的元素。
例如，使用`p`选择器可以选择所有的`<p>`标签。
2. 类选择器类选择器用于选择带有特定类名的元素。
通过在类名前面加上点号（.），例如`.red`，可以选择具有`red`类的元素。
3. ID选择器ID选择器用于选择具有特定ID的元素。
通过在ID名称前面加上井号（#），例如`#header`，可以选择具有`header`的ID的元素。
4. 属性选择器属性选择器用于选择具有特定属性值的元素。
通过在属性名前加上方括号（[]），例如`[type="text"]`，可以选择type属性值为"text"的元素。
5. 伪类选择器伪类选择器用于选择元素的特殊状态。
常见的伪类选择器有`hover`、`active`和`visited`等。
6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。
常见的伪元素选择器有`::before`和`::after`等。
三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。
例如，`font-family: Arial, sans-serif;`可以设置字体为Arial。
2. 颜色可以使用`color`属性设置元素的文本颜色。
例如，`color: red;`可以将文本颜色设置为红色。
3. 背景可以使用`background-color`属性设置元素的背景颜色。
例如，`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。
四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。
20个CSSCSS3常用样式汇总
20个CSSCSS3常⽤样式汇总1.强制⽂本单⾏显⽰：white-space:nowrap;2.设置溢出⽂本显⽰为省略标记：text-overflow:ellipsis;(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）其中clip表⽰直接裁切溢出的⽂本；值ellipsis表⽰⽂本溢出时，显⽰省略标记(...)，省略标记代替最后⼀个字符；值ellipsis-word表⽰⽂本溢出时，也是显⽰省略标记(...),不同的是，省略标记代替的是最后⼀个词)3.例如⼀段代码：<a href="javascript:void(0)"><img src="images/suba.gif"></a>当点击a标签⾥⾯的图⽚的时候，有虚线框，IE中图⽚还有边框，如何解决？解决办法：a{outline:none;}//主要是针对⽕狐等浏览器，但IE不⾏img{border:0;}a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。
对于a标签来说，⼀般简单的解决办法是：在a标签⾥加⼊js控制，当a标签被聚焦时，强制取消焦点，这时候a标签⾃然不会有虚线框。
<a href="#" onfocus="this.blur();">测试</a>但是当连接太多的时候，⼀个⼀个的加这段代码不实⽤4.html中两张图横向回车导致间隙,怎么才能去除成为⽆间隙？例如：div 宽300px ; img 宽100px; border:0px;复制代码代码如下:<div><img /><img /><img /></div>//上⾯情况刚好显⽰三张图</p> <p><div><img /><img /><img /></div>这种情况就⽆法在横向显⽰三张图，因为回车导致两图间有间隙。
css3 中对溢出的处理
css3 中对溢出的处理
在CSS3中，有以下几种对溢出进行处理的属性：
1. `overflow`属性：控制内容溢出容器时的处理方式。
常用值有：
- `overflow: visible;`（默认值）：内容可溢出容器并显示在容器外部。
- `overflow: hidden;`：内容溢出容器时将被裁剪隐藏。
- `overflow: scroll;`：内容溢出容器时显示滚动条，无论内容是否溢出。
- `overflow: auto;`：自动决定是否显示滚动条，当内容溢出容器时显示滚动条。
2. `text-overflow`属性：控制文本溢出容器时的处理方式。
常用值有：
- `text-overflow: clip;`（默认值）：直接裁剪文本，不显示省略号。
- `text-overflow: ellipsis;`：将溢出的文本显示为省略号。
3. `white-space`属性：控制文本的换行方式。
常用值有：
- `white-space: normal;`（默认值）：允许文本换行。
- `white-space: nowrap;`：禁止文本换行，超出容器宽度时会溢出。
4. `word-break`属性：控制文本在换行时的断字方式。
常用值有：
- `word-break: normal;`（默认值）：按照默认的断字规则进
行断字。
- `word-break: break-all;`：无论是否有空格或连字符，都会进行断字。
这些属性可以根据需求进行组合使用，来处理溢出的情况。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
css3属性手册
CSS3 动画属性（Animation）属性描述CSS @keyframes规定动画。
3 animation所有动画属性的简写属性，除了 animation-play-state3属性。
animation-name规定 @keyframes 动画的名称。
3 animation-duration规定动画完成一个周期所花费的秒或毫秒。
3 animation-timing-function规定动画的速度曲线。
3 animation-delay规定动画何时开始。
3 animation-iteration-count规定动画被播放的次数。
3 animation-direction规定动画是否在下一周期逆向地播放。
3 animation-play-state规定动画是否正在运行或暂停。
3 animation-fill-mode规定对象动画时间之外的状态。
3 CSS 背景属性（Background）属性描述CS background在一个声明中设置所有的背景属性。
1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
1 background-color设置元素的背景颜色。
1 background-image设置元素的背景图像。
1 background-position设置背景图像的开始位置。
1 background-repeat设置是否及如何重复背景图像。
1 background-clip规定背景的绘制区域。
3 background-origin规定背景图片的定位区域。
3 background-size规定背景图片的尺寸。
3 CSS 边框属性（Border 和Outline）属性描述CS border在一个声明中设置所有的边框属性。
1border-bottom在一个声明中设置所有的下边框属性。
1 border-bottom-color设置下边框的颜色。
2 border-bottom-style设置下边框的样式。
css3 元素对齐
css3 元素对齐CSS3是一种强大的样式表语言，它提供了许多用于对齐元素的属性和方法。
在本文中，我们将讨论一些常见的 CSS3 元素对齐技术，以及如何使用它们来实现各种布局。
一、水平对齐1. text-align 属性text-align 属性用于水平对齐文本。
它可以设置为 left、right、center 或 justify，分别代表左对齐、右对齐、居中和两端对齐。
例如：```.container {text-align: center;}```2. margin 属性margin 属性可以用于水平对齐块级元素。
设置 margin-left 和margin-right 属性的值为 auto 可以使元素水平居中对齐。
例如：```.container {width: 50%;margin: 0 auto;}```3. flexbox 布局flexbox 是一种强大的布局模式，它可以轻松实现水平和垂直对齐。
使用 display: flex 将容器元素设置为 flex 容器，然后使用justify-content 属性来指定子元素的水平对齐方式。
例如：```.container {display: flex;justify-content: center;}```二、垂直对齐1. line-height 属性line-height 属性用于设置行高，它可以用于垂直对齐内联元素和行内块元素。
将 line-height 属性的值设置为等于容器高度可以使元素垂直居中对齐。
例如：```.container {height: 100px;line-height: 100px;}```2. vertical-align 属性vertical-align 属性用于垂直对齐表格单元格中的内容。
它可以设置为 top、middle、bottom 或 baseline，分别代表顶部对齐、居中对齐、底部对齐和基线对齐。
例如：```td {vertical-align: middle;}```3. flexbox 布局flexbox 布局也可以用于垂直对齐。
CSS3新增属性
CSS3新增属性⼀、transform变换效果 CSS3 提供了元素变形效果，也叫做变换。
它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform 和 transform-origin对于 transform 的属性值，具体如下表：属性值说明none⽆变换translate(长度值或百分数值) translateX(长度值或百分数值) translatY(长度值或百分数值)在⽔平⽅向、垂直⽅向或两个⽅向上平移元素。
scale(数值) scaleX(数值) scaleY(数值)在⽔平⽅向、垂直⽅向或两个⽅向上缩放元素rotate(⾓度)旋转元素skew(⾓度) skewX(⾓度) skewY(⾓度)在⽔平⽅向、垂直⽅向或两个⽅向上使元素倾斜⼀定的⾓度matrix(4~6 数值，逗号隔开)指定⾃定义变换//向⽔平和垂直各移动 200 像素，也可以使⽤百分⽐transform: translate(200px,200px);//向⽔平平移 200 像素，不加后⾯的 0 也可以transform: translate(200px,0);transform: translateX(200px);//向垂直平移 200 像素transform: translate(0,200px);transform: translateY(200px);//⽔平、垂直⽅向放⼤ 1.5 倍transform: scale(1.5);transform: scale(1.5,1.5);//⽔平、垂直⽅向缩⼩ 0.8 倍transform: scale(0.8,0.8);//⽔平⽅向放⼤ 1.5 倍transform: scaleX(1.5);//垂直⽅向放⼤ 1.5 倍transform: scaleY(1.5);//旋转元素，0 ~ 360 度之间，负值均可transform: rotate(-45deg);//倾斜元素，0 ~ 360 度之间，负值均可transform: skew(45deg, 20deg);//⽔平倾斜元素，0 ~ 360 度之间，负值均可transform: skewX(45deg);//垂直倾斜元素，0 ~ 360 度之间，负值均可transform: skewY(45deg);//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧transform: matrix(1,0,0,1,30,30);//不同的值可以累计，通过空格分割transform: rotate(-45deg) scale(1.5);⼆．transform-origintransform-origin 属性可以设置变换的起点。
3.2 CSS3样式属性
6.@font-face属性（使用服务器端字体）
@font-face{ }
font-famliy:字体名称; src:字体路径;
CSS3背景样式属性
网页能通过背景图像给浏览者留下深刻的印象，不同主题的网站 特色往往会体现在网站背景上，合理控制背景颜色和背景图像至 关重要，在网页设计制作中，通过CSS3的一系列背景样式属性 来控制网页背景的显示效果，如背景颜色、背景图像背景图像平 铺方式、背景图像位置等属性。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2,...,颜色值n)
CSS3渐变属性
2.径向渐变 径向渐变是网页中另外一种常用的渐变，在径向渐变过程中，起 始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变 。运用CSS3中的“background-image:radial-gradient(参数值 );”样式可以实现线性渐变效果，其基本语法格式如下。
P{font-family:”微软雅黑”;}
2.font-size属性(字体大小)
p{font-size:12px;}
3.color属性（字体颜色）
p{color:#FF00000;}
CSS3文本样式属性
4.font-style属性(字体风格)
p{font-style:italic;}
5.font-weight属性(字体粗细)
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,...,颜色值n)
CSS3边框样式属性
网页制作中元素的边框是经常需要美化和修饰的，通过HTML定 义的元素边框风格单一，无法满足网页美观的要求。在CSS样式 中，通过对boder属性进行定义边框的宽度、样式、颜色、圆角 边框等，可以使网页元素的边框有更丰富的样式，从而使元素的 效果更加美观。
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。
CSS3中新增了 3 种属性选择器：E[att^=value]、E[att$=value] 和 E[att*=value]1.E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为 E 的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的⼦字符串。
其中 E 是可以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id^=section] 表⽰匹配包含 id 属性，且 id 属性值是以 “section” 字符串开头的 div 元素。
2.E[att$=value] 属性选择器 E[att$=value] 属性选择器是指选择器名称为 E 的标记，且该选择器定义了 att 属性，att 属性值包含后缀为 value 的⼦字符串。
与E[att$=value]选择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id$=section]表⽰匹配包含 id 属性，且 id 属性值是以 “section” 结尾的 div 元素。
3.E[att*=value] 属性选择器 E[att*=value] 选择器⽤于选择名为 E 的标记，且该标记定义了 att 属性，att 属性值包含 value ⼦字符串，该选择器与前两个选择器⼀样，E 元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id*=section] 表⽰匹配包含 id 属性，且 id 属性包含 “section” 字符串的 div 元素。
关系选择器 CSS3中的关系选择器主要包括⼦代选择器和兄弟选择器，其中⼦代选择器由符号 “>” 连接，兄弟选择器由符号 “+”和 “~” 连接。
1.⼦代选择器（>） ⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素，如希望选择只作为 h1 元素⼦元素的 strong 元素，可以写为：h1 > strong。
CSS3常用属性大全
CSS3 动画属性（Animation）keyframes //规定动画。
animation //所有动画属性的简写属性，除了animation-play-state 属性。
animation-name //规定keyframes 动画的名称。
animation-duration //规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function //规定动画的速度曲线。
animation-delay //规定动画何时开始。
animation-iteration-count //规定动画被播放的次数。
animation-direction //规定动画是否在下一周期逆向地播放。
animation-play-state //规定动画是否正在运行或暂停。
animation-fill-mode //规定对象动画时间之外的状态。
CSS 背景属性（Background）background //在一个声明中设置所有的背景属性。
background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。
background-color //设置元素的背景颜色。
background-image //设置元素的背景图像。
background-position //设置背景图像的开始位置。
background-repeat //设置是否及如何重复背景图像。
background-clip //规定背景的绘制区域。
background-origin //规定背景图片的定位区域。
background-size //规定背景图片的尺寸。
CSS 边框属性（Border 和Outline）border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color //设置下边框的颜色。
border-bottom-style //设置下边框的样式。
css3盒子模型中的box-sizing属性的使用_boxsizing常用的3种属性
css3盒⼦模型中的box-sizing属性的使⽤_boxsizing常⽤的3种属性box-sizing属性⽤来定义元素的width和height所表⽰的区域,该属性⼀般有三种值：content-box、border-box、inherit。
其中inherit表⽰box-sizing的值应该从⽗元素继承。
content-box和border-box的主要区别就是元素的width和height的值包不包括border、padding这两个属性的值。
⼀、content-boxcontent-box也叫标准盒⼦模型，是默认值。
它的width组成仅仅只有content区域（不包括padding区域和border区域）举个例⼦，如果该元素的宽度为100px，那么这表⽰该元素的内容区域宽度为100px,再如果padding为10px,border的宽度为10px，那么它的实际宽度为width+(padding-left)+(padding-right)+(border-left-width)+(border-right-width)=100px+10px+10px+10px+10px=140px;下图是标准盒⼦模型的⽰意图：⼆、border-boxborder-box也叫IE盒⼦模型,它的width组成由content区域、padding区域、border区域举个例⼦，如果这个元素的宽度为100px，那么它的实际宽度就是100px,再如果它的padding为10px,border的宽度为10px，那么该元素的内容区域宽度为width-(padding-left)-(padding-right)-(width-left-width)-(width-right-width)=100px-10px-10px-10px-10px=60px;下图是IE盒⼦模型的⽰意图：。
CSS3学习
语法描述:语法描述:4.其他CSS3选择器1.E~F:通用兄弟元素选择器。
选择匹配F的所有元素，且匹配元素位于匹配E的元素后面。
2.E:not(s):否定伪类选择器。
选择匹配E的所有元素，且过滤掉匹配s选择符的任意元素。
E:not(s)选择器相当于二次过滤，适合精确选择元素。
E[att*="val"]属性att的值包含"val"字符串的元素CSS3学习一、CSS3新增选择器1.CSS3属性选择器E[att^="val"]属性att的值以"val"开头的元素E[att$="val"]属性att的值以"val"结尾的元素作用：这个属性允许你为元素添加边框背景。
2.border-image属性二、CSS3设置边框属性1.border-radius属性作用:这个属性允许你为元素添加圆角边框。
语法:3.E:target:目标伪类选择器类型。
选择器匹配E的所有元素,且匹配元素被相关URL指向。
该选选择器,只有当存在的URL指向该匹配的元素时,样式效果才能够起效。
source slice width outset repeat语法描述:值h-shadowv-shadowblurspreadcolor语法：语法描述:语法：语法描述：值border-boxpadding-boxcontent-box 语法：语法描述:值lengthpercentagecovercontain四、CSS3设置文本字体颜色描述background-clip:border-box\padding-box\content-box描述默认值。
从边框区域向外裁剪背从补白区域外裁剪背景从内容区域向外裁剪背景定义边框背景图像的偏移位定义边框背景图像的重复性,重复(repeat(round)定义边框的背景图片源,即定义如何裁切背景图丁一边看背景图像的显示大小(即3.box-shadow属性作用:可以设置一个或多个下拉阴影的框。
css3教程
css3教程CSS3是一种样式表语言，用于描述网页上的元素如何显示和排版。
CSS3是CSS的最新版本，引入了许多新的特性和功能，使得网页设计更加灵活和丰富。
下面是一个关于CSS3的简要教程，介绍了其基本语法和常用特性。
1. CSS3的基本语法CSS3的基本语法由选择器和声明块组成。
选择器用于选择要应用样式的元素，声明块包含一组样式属性和值。
例如，要将一个标题元素的文字颜色设置为红色，可以使用以下CSS3代码：h1 {color: red;}2. CSS3的常用选择器CSS3引入了一些新的选择器，使得选择元素更加灵活。
这些选择器包括：- 类选择器（.class）：选择具有相同类名的元素。
- ID选择器（#id）：选择具有指定ID的元素。
- 子元素选择器（parent > child）：选择作为指定父元素的直接子元素的元素。
3. CSS3的常用特性CSS3引入了许多新的特性和功能，下面是一些常用的特性：- 圆角（border-radius）：允许将元素的边角设置为圆形。
- 阴影（box-shadow）：允许为元素添加阴影效果。
- 渐变（linear-gradient）：允许为元素创建平滑的渐变效果。
- 过渡（transition）：允许为元素添加平滑的动画效果。
- 动画（@keyframes）：允许创建复杂的CSS动画效果。
4. CSS3的兼容性虽然CSS3在功能上更强大，但并不是所有浏览器都完全支持它的所有特性。
为了确保网页的兼容性，可以使用CSS3前缀（如-webkit，-moz，-o等）来指定特定浏览器的样式。
例如，要为Chrome浏览器设置圆角效果，可以使用以下代码：h1 {-webkit-border-radius: 10px;}总结：CSS3是一种强大的样式表语言，可以用于创建丰富多彩的网页设计效果。
本教程简要介绍了CSS3的基本语法和常用特性，希望能够帮助你了解和使用CSS3。
为了兼容不同浏览器，记得使用适当的前缀。
CSS3box-shadow属性的使用
CSS3box-shadow属性的使⽤每次使⽤box-shadow,都要查阅资料才能实现对应的效果,现在总结⼀下,⽅便以后查看。
⼀、语法：E {box-shadow: inset x-offset y-offset blur-radius spread-radius color};E {box-shadow: 投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊};⼆、取值：1. 阴影类型：此参数可选，默认的投影⽅式是外阴影；如果取其唯⼀值“inset”,就是将外阴影变成内阴影；2.X-offset:是指阴影⽔平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边；3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部；4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表⽰阴影不具有模糊效果，值越⼤阴影的边缘就越模糊；5. 阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩⼤，反之，则缩⼩6. 阴影颜⾊：此参数可选，不设定任何颜⾊时，浏览器会取默认⾊，但各浏览器默认⾊不⼀样，特别是在webkit内核下的safari和chrome浏览器将⽆⾊，也就是透明，建议不要省略此参数。
三、兼容浏览器的写法：//Firefox4.0--moz-box-shadow:投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊;//Safari and Google chrome10.0--webkit-box-shadow:投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊;//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9box-shadow:投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊;box-shadow和text-shadow⼀样可以使⽤⼀个或多个投影，如果使⽤多个投影时必须需要⽤逗号“，”分开。
css属性大全
c s s属性大全-CAL-FENGHAI.-(YICAI)-Company One1字体属性：(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位：PX、PD、EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-caps;(小型大写字母) normal;(正常)大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体： (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性： (background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法 background:#000 url(..) repeat fixed left top;区块属性： (Block)字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性： (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性： (Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color;列表属性： (List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性： (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一 CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/; /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/; /*背景图片*/background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指 CURSOR: hand十字体 cursor:crosshair箭头朝下 cursor:s-resize十字箭头 cursor:move箭头朝右 cursor:move加一问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize文字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式 {font:font-style font-variant font-weight font-size font-family}2 字体类型 {font-family:"字体1","字体2","字体3",...}3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格 {font-style:inherit|italic|normal|oblique}5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高 {line-height:数值|inherit|normal;}9 字间距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-cps }12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距 {line-height:数值|inherit|normal;}2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格 {text-indent:数值|inherit}4 水平对齐 {text-align:left|right|center|justify}5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色 {background-color:数值}2 背景图片 {background-image: url(URL)|none}3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位 {background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2 补白 {padding:padding-top padding-right padding-bottom padding-left}3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}宽度值： thin|medium|thick|数值4 边框颜色 {border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框 {border:border-width border-style color}上边框 {border-top:border-top-width border-style color}右边框 {border-right:border-right-width border-style color}下边框 {border-bottom:border-bottom-width border-style color}左边框 {border-left:border-left-width border-style color}7 宽度 {width:长度|百分比| auto}8 高度 {height:数值|auto}9 漂浮 {float:left|right|none}10 清除 {clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示 {display:none|block|inline|list-item}2 控制空白 {white-space:normal|pre|nowarp}3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-position:inside|outside}6 目录列表 {list-style:目录样式类型|目录样式位置|url}7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3 动画属性( Animation )@keyframes //规定动画。
animation // 所有动画属性的简写属性，除了animation-play-state 属性。
animation-name // 规定@keyframes 动画的名称。
animation-duration //规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function //规定动画的速度曲线。
animation-delay //规定动画何时开始。
animation-iteration-count //规定动画被播放的次数。
animation-direction //规定动画是否在下一周期逆向地播放。
animation-play-state //规定动画是否正在运行或暂停。
animation-fill-mode //规定对象动画时间之外的状态。
CSS 背景属性( Background )background //在一个声明中设置所有的背景属性。
background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。
background-color //设置元素的背景颜色。
background-image //设置元素的背景图像。
background-position //设置背景图像的开始位置。
background-repeat //设置是否及如何重复背景图像。
background-clip //规定背景的绘制区域。
background-origin //规定背景图片的定位区域。
background-size //规定背景图片的尺寸。
CSS 边框属性（ Border 和 Outline ）border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color//设置下边框的颜色。
border-bottom-style//设置下边框的样式。
border-bottom-width //设置下边框的宽度。
border-color//设置四条边框的颜色。
border-left//在一个声明中设置所有的左边框属性。
border-left-color//设置左边框的颜色。
border-left-style//设置左边框的样式。
border-left-width//设置左边框的宽度。
border-right//在一个声明中设置所有的右边框属性。
border-right-color//设置右边框的颜色。
border-right-style//设置右边框的样式。
border-right-width//设置右边框的宽度。
border-style//设置四条边框的样式。
border-top//在一个声明中设置所有的上边框属性。
border-top-color//设置上边框的颜色。
border-top-style//设置上边框的样式。
border-top-width//设置上边框的宽度。
border-width//设置四条边框的宽度。
outline//在一个声明中设置所有的轮廓属性。
outline-color//设置轮廓的颜色。
outline-style//设置轮廓的样式。
outline-width//设置轮廓的宽度。
border-bottom-left-radius // 定义边框左下角的形状。
border-bottom-right-radius // 定义边框右下角的形状。
border-image //简写属性，设置所有border-image-* 属性。
border-image-outset //规定边框图像区域超出边框的量。
border-image-repeat // 图像边框是否应平铺(repeated) 、铺满(rounded) 或拉伸(stretched) 。
border-image-slice //规定图像边框的向内偏移。
border-image-source //规定用作边框的图片。
border-image-width //规定图片边框的宽度。
border-radius //简写属性，设置所有四个border-*-radius 属性。
border-top-left-radius //定义边框左上角的形状。
border-top-right-radius //定义边框右下角的形状。
box-decoration-break //box-shadow //向方框添加一个或多个阴影。
Box 属性overflow-x //如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-y//如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
overflow-style //规定溢出元素的首选滚动方法。
Rotation //围绕由rotation-point 属性定义的点对元素进行旋转。
rotation-point // 定义距离上左边框边缘的偏移点。
Color 属性color-profile //允许使用源的颜色配置文件的默认以外的规范。
opacity//规定书签的级别。
精品文档rendering-intent //允许使用颜色配置文件渲染意图的默认以外的规范。
Content for Paged Media 属性bookmark-label //规定书签的标记。
bookmark-level //规定书签的级别。
bookmark-target //规定书签链接的目标。
float-offset // 将元素放在float 属性通常放置的位置的相反方向。
hyphenate-after//规定连字单词中连字符之后的最小字符数。
hyphenate-before //规定连字单词中连字符之前的最小字符数。
hyphenate-character //规定当发生断字时显示的字符串。
hyphenate-lines //指示元素中连续断字连线的最大数。
hyphenate-resource // 规定帮助浏览器确定断字点的外部资源（逗号分隔的列表）。
hyphens//设置如何对单词进行拆分，以改善段落的布局。
image-resolution //规定图像的正确分辨率。
marks //向文档添加裁切标记或十字标记。
string-set //CSS 尺寸属性（Dimension )height //设置元素高度。
max-height //设置元素的最大高度。
max-width //设置元素的最大宽度。
min-height //设置元素的最小高度。
min-width //设置元素的最小宽度。
width //设置元素的宽度。
可伸缩框属性Flexible Box )（box-align //规定如何对齐框的子元素。
box-direction //规定框的子元素的显示方向。
box-flex //规定框的子元素是否可伸缩。
box-flex-group //将可伸缩元素分配到柔性分组。
box-lines //规定当超出父元素框的空间时，是否换行显示。
box-ordinal-group//规定框的子元素的显示次序。
box-orient //规定框的子元素是否应水平或垂直排列。
box-pack //规定水平框中的水平位置或者垂直框中的垂直位置。
CSS 字体属性（Font)font //在一个声明中设置所有字体属性。
font-family //规定文本的字体系列。
font-size //规定文本的字体尺寸。
font-size-adjust // 为元素规定aspect 值。
font-stretch //收缩或拉伸当前的字体系列。
font-style//规定文本的字体样式。
font-variant //规定是否以小型大写字母的字体显示文本。
font-weight //规定字体的粗细。
内容生成( Generated Content )content // 与:before 以及:after 伪元素配合使用，来插入生成内容。
counter-increment //递增或递减一个或多个计数器。
counter-reset //创建或重置一个或多个计数器。
quotes //设置嵌套引用的引号类型。
crop //允许被替换元素仅仅是对象的矩形区域，而不是整个对象。
move-to //从流中删除元素，然后在文档中后面的点上重新插入。
page-policy //确定元素基于页面的occurrence 应用于计数器还是字符串值。
Grid 属性grid-columns //规定网格中每个列的宽度。
grid-rows //规定网格中每个列的高度。
Hyperlink 属性target //简写属性，设置target-name 、target-new 以及target-position 属性。
target-name // 规定在何处打开链接（链接的目标）。
target-new //规定目标链接在新窗口还是在已有窗口的新标签页中打开。
target-position //规定在何处放置新的目标链接。
CSS 列表属性（ List ）list-style //在一个声明中设置所有的列表属性。
list-style-image //将图象设置为列表项标记。
list-style-position //设置列表项标记的放置位置。
list-style-type //设置列表项标记的类型。
marker-offset //设置或检索标记容器和主容器之间水平补白。
即两个容器靠近的一边的间距。
CSS 外边距属性（Margin )margin //在一个声明中设置所有外边距属性。
margin-bottom //设置元素的下外边距。
margin-left //设置元素的左外边距。
margin-right//设置元素的右外边距。
精品文档margin-top //设置元素的上外边距。
Marquee 属性marquee-direction //设置移动内容的方向。
marquee-play-count //设置内容移动多少次。
marquee-speed//设置内容滚动得多快。
marquee-style //设置移动内容的样式。
多列属性( Multi-column )column-count //规定元素应该被分隔的列数。
column-fill //规定如何填充列。
column-gap //规定列之间的间隔。
column-rule // 设置所有column-rule-* 属性的简写属性。
column-rule-color //规定列之间规则的颜色。
column-rule-style //规定列之间规则的样式。