常用CSS属性

常用CSS属性

1、元素尺寸

元素尺寸设计元素宽度和高度两个属性。

1.1、宽度

在CSS代码中通过 width 属性可以控制元素的宽度，其用法为:

width : value ;

比如:

width : 500px ;

宽度取值可以使用 像素为单位 ，也可以使用 百分比，比如:

width : 50% ; 

采用百分比时需要注意，元素的实际宽度都是相对于其父元素的宽度来确定的。

1.2、高度

在CSS代码中通过 height 属性可以控制元素的高度，其用法为:

height : value ;

比如:

height: 500px ;

高度取值可以使用 像素为单位 ，也可以使用 百分比，比如:

height : 50% ; 

采用百分比时需要注意，元素的实际高度都是相对于其父元素的高度来确定的。

2、元素边框

元素的边框涉及属性较多，不仅涉及 粗细 、风格 、颜色 等属性，还可以针对某一条边来设置边框的 粗细、风格、颜色 等。

2.1、四周边框

所谓四周边框，就是批量设置四条边的边框，让四条边具有相同样式的边框。

批量设置四边边框的 粗细、风格、颜色 可以通过 border 属性来实现:

border : width style color ;

注意 border 属性值的书写顺序:

1. 粗细 ( width )
2. 风格 ( style )
3. 颜色 ( color )

2.1.1、四周边框粗细

批量设置四边边框粗细可以通过 border-width 属性来实现:

border-width : width ;

2.1.2、四周边框风格

批量设置四边边框风格可以通过 border-style 属性来实现:

border-style : none | solid | double | dotted | ... ;

2.1.3、四周边框颜色

批量设置四边边框颜色可以通过 border-color 属性来实现:

border-color : color ;

2.2、顶、底、左、右部边框分开设置

顶部边框为例
所谓顶部边框，就是单独设置顶部的边框，让顶部边框具有独立的样式。

2.2.1、顶部边框粗细

单独设置顶部边框粗细可以通过 border-top-width 属性来实现:

border-top-width : width ;

2.2.2、顶部边框风格

单独设置顶部边框风格可以通过 border-top-style 属性来实现:

border-top-style : none | solid | double | dotted | ... ;

2.2.3、顶部边框颜色

单独设置顶部边框颜色可以通过 border-top-color 属性来实现:

border-top-color : color ;

2.2.4、顶部边框

依次设置顶部边框的 粗细、风格、颜色 可以通过 border-top 属性来实现:

border-top : width style color ;

注意 border-top 属性值的书写顺序:

1. 粗细 ( width )
2. 风格 ( style )
3. 颜色 ( color )

3、圆角边框

在 CSS 3.0 规范中增加了对圆角边框的支持。

3.1、左、右上角圆角

以左上圆角为例
单独设置左上角圆角可以通过 border-top-left-radius 属性实现，其用法为:

border-top-left-radius : horizontal vertical ;

其中:

• 第一个值 horizontal 表示水平半径 ，第二个值 vertical 表示垂直半径
• 第二个值可以被省略，此时浏览器会直接复制第一个值
  • 即仅显式书写单个值时，浏览器首先该值被当作 水平半径 对待
  • 同时浏览器会将该值复制到第二个位置，并以此为 垂直半径
• 水平半径和垂直半径都可以使用 长度值 或 百分比 来设置
  • 使用 长度值 设置时以实际长度值为准
  • 使用 百分比 设置时，水平半径 相对于边界框的宽度，垂直半径 相对于边界框的高度
• 当水平半径或垂直半径任一长度为零时元素角落形状是方形的(不再有圆角效果)
• 水平半径和垂直半径都不允许是负值

3.6、四角圆角

批量设置四角角落形状可以通过 border-radius 属性实现，

border-radius是一个最多可指定四个 border-*-radius 属性的复合属性，

其用法为:

border-radius : horizontal / vertical ;

其中:

• horizontal 表示水平半径，vertical 表示垂直半径
  • 同时显式指定水平半径 和垂直半径时，两部分取值之间使用 / 隔开
  • 当省略 垂直半径时，垂直半径与相应位置的 水平半径相同
• 水平半径 和垂直半径都可以按照顺时针方向依次设置
  • 其设置顺序为 左上角 右上角 右下角 左下角
  • 当省略左下角时，左下角与右上角是相同的 (复制对角值)
  • 当省略右下角时，右下角与左上角是相同的 (复制对角值)
  • 当省略右上角时，右上角与左上角是相同的 (将第一个值复制到第二个位置)
• 水平半径和垂直半径都可以使用 长度值 也可以使用 百分比
  • 水平半径和 垂直半径 都不允许是负值

4、轮廓

通过 outline 属性可以在一个声明中设置所有的轮廓属性:

outline : color style width ;

其取值中:

• color 与 outline-color 含义相同
• style 与 outline-style 含义相同
• width 与 outline-width 含义相同

4.1、轮廓粗细

通过 outline-width 单独设置轮廓的宽度:

outline-width : thin | medium | thick | length ;

其中

• thin 表示细的轮廓
• medium 表示中等轮廓，这是默认值
• thick 表示粗的轮廓
• length 表示用户自定义的轮廓粗细值，比如 10px 等。

4.2、轮廓风格

通过 outline-style 单独设置轮廓的风格:

outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset ;

其中:

• none 是默认，用于定义无轮廓
• dotted 定义点状的轮廓
• dashed 定义虚线轮廓
• solid 定义实线轮廓
• double 定义双线轮廓。双线的宽度等同于 outline-width 的值
• groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值
• ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值
• inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值
• outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值

4.3、轮廓颜色

通过 outline-color 单独设置轮廓的颜色:

outline-color : colorName | hexNumber | rgbNumber | invert ;

其中:

• colorName 规定颜色值为颜色名称的轮廓颜色（比如 red）
• hexNumber 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）
• rgbNumber 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）
• invert 是默认值。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见

5、元素阴影

在 CSS 3.0 规范中增加了对元素阴影当支持，通过 box-shadow 可以向元素边框添加一个或多个阴影。

其基本用法为:

box-shadow : h-shadow v-shadow blur spread color [inset] ;

其中:

• h-shadow 表示阴影的水平偏移量
  • h-shadow 是必须指定的属性
  • h-shadow 取值为正数时表示向右偏移
  • h-shadow 取值为负数时表示向左偏移
  • h-shadow 默认值为零，表示既不向左偏移也不向右偏移
• v-shadow 表示阴影的垂直偏移量
  • v-shadow 是必须指定的属性
  • v-shadow 取值为正数时表示向下偏移
  • v-shadow 取值为负数时表示向上偏移
  • v-shadow 默认值为零，表示既不向下偏移也不向上偏移
• blur 表示模糊距离
• spread 表示阴影当尺寸
• color 表示阴影的颜色
• inset 为可选项，表示阴影为 内部阴影

6、元素背景

6.1、背景颜色

通过 background-color 可以为元素设置背景颜色，其用法为:

background-color : color ;

其取值可以是:

• transparent 表示透明背景，这是默认值
• colorName 表示颜色名称，即用来表示颜色的单词，比如 red 、green 、blue
• hexNumber 表示以六位十六进制数字表示的颜色值，比如 #dedede 、#eeeeee
• rgbNumber 表示采用 rgb 代码来设置背景颜色，比如 rgb( 100 , 100 , 100 )
  • 函数 rgb 的三个参数分别表示 red 、green 、blue ，取值范围为 0 ~ 255
• rgbaNumber 表示采用 rgba 函数来设置背景颜色，比如 rgba( 100 , 100 , 100 , 0.5 )
  • 函数 rgba 的前三个参数含义与 函数 rgb 的前三个参数相同
  • 函数 rgba 第四个参数表示透明度，其取值为 0 ~ 1
• inherit 表示从父元素中继承其 background-color 属性值

背景颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。

如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

简单来说，背景颜色会覆盖整个元素边框外边缘以内的所有区域。

6.2、背景图像

background-image : url( "图片路径" ) | none : 

其中:

• none 是默认值，表示没有背景图片
• url("图片路径") 用于指定图片位置

元素的背景图像会占据元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认情况下，背景图像位于元素的左上角，并在水平和垂直方向上重复(repeat)。

6.3、平铺背景图像

background-repeat : repeat | repeat-x | repeat-y | no-repeat : 

默认值为 repeat ( 即平铺 )

6.4、背景图像位置

• 通过 像素 或 其它单位 来设置背景图片的位置

background-position : xpos ypos : 

其中的 xpos 表示水平位置，ypos 表示垂直位置。

• 通过百分比来设置背景图片的位置

background-position : x% y% ;

其中的 x% 表示水平位置，y% 表示垂直位置。

• 通过单词来设置背景图片的位置

background-position : top left ;

垂直位置使用 top 、center 、bottom 来表示上中下，水平位置使用 left 、center 、right 表示左中右。

当仅仅指定了单个单词时，另一个单词将默认为 center，比如 background-position : top ; 。

background-position 的默认值为 0 0 ( 即默认放在左上角 )

6.5、背景图像尺寸

在 CSS 中通过background-size 属性规定背景图像的尺寸，其用法为:

background-size : length | percentage | cover | contain ;

其中:

• length 表示通过 像素 或 其它单位 来设置背景图像的尺寸

background-size : width  height ;

第一个值用于设置宽度，第二个值用于设置高度。

如果只设置一个值，则第二个值会被设置为 “auto” 。

• percentage 表示通过百分比来设置背景图像的宽度和高度

background-size : width%  height% ;

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 “auto”。

• cover 表示用背景图像覆盖整个元素

background-size : cover ;

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

• contain 表示元素内容区域包含背景图像

background-size : contain ;

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

6.6、背景图像固定方式

背景图像的固定方式有三种:

• 背景图像置相对于元素本身固定

  • 此时的背景图像会随着包含它的区块一起滚动
  • 此时的背景图像不会随着元素内容的滚动而滚动
  • 这是默认值

• 背景图像相对于视口(viewport)固定

  • 此时的背景图像不会随着包含它的区块一起滚动
  • 此时的背景图像不会随着元素内容的滚动而滚动
  • 并且仅当视口中显示包含它的区块时才显示该背景

• 背景图像相对于元素内容固定

  • 此时的背景图像会随着包含它的区块一起滚动
  • 此时的背景图像会随着元素内容的滚动而滚动
  • 背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框

在CSS中通过 background-attachment 属性来控制背景图像的移动方式:

background-attachment : scroll | fixed | local ;

7、过渡

在 CSS 3.0 规范中新增了对过渡效果的支持。

利用 CSS 3 提供的过渡效果，可以在不使用 Flash 动画或 JavaScript 的情况下，

为元素指定从一种样式变换为另一种样式时的渐变效果(动画效果)。

7.1、过渡属性

使用过渡效果时，首先要指定使用过渡效果的CSS属性名称，其用法为:

transition-property : none | all | property ;

其中:

• none 表示没有属性会获得过渡效果
• all 表示所有属性都将获得过渡效果
  • all 是 transition-property 属性的默认值
• property 用于指定应用过渡效果的 CSS 属性名称列表(列表以逗号分隔)
  • 当仅指定单个属性时可以使用 transition-property : width ;
  • 当需要指定多个属性时可以使用 transition-property : width , height , background-color ;

7.2、过渡时间

指定过渡属性后，还需要指定完成过渡效果需要花费的时间（以秒或毫秒计），其用法为:

transition-duration : time ;

需要注意的是，如果没有显式指定 transition-duration 则其默认值是零，意味着不会有过渡效果。

另外，过渡时间可以以秒(s)为单位，比如 5s ；或者以毫秒(ms)为单位，比如 500ms 。

7.3、速度曲线

通过 transition-timing-function 属性规定过渡效果的速度曲线，即随着时间来改变过渡效果的变换速度。

比如，在过渡效果的开始阶段速度比较慢，随后加快，匀速变换到快结束时，速度再变慢。

其基本用法为:

transition-timing-function : linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

取值中:

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
  • ease 是 transition-timing-function 的默认值
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
• cubic-bezier(n,n,n,n) 通过在 cubic-bezier 函数中指定参数值来控制速度
  • cubic-bezier 函数可能的值是 0 至 1 之间的数值

7.4、延迟

如果在过渡效果开始之前需要等待一段时间，

可以通过 transition-delay 属性来指定延迟时间(以秒或毫秒计)，其用法为:

transition-delay : time ;

即通过 transition-delay 属性可以让过渡效果延迟一段时间后再执行。

7.5、transition

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

其用法为:

transition : property duration timing-function delay;

其中:

• property 规定设置过渡效果的 CSS 属性的名称 ( transition-property )
• duration 规定完成过渡效果需要多少秒或毫秒 ( transition-duration )
• timing-function 规定速度效果的速度曲线 ( transition-timing-function )
• delay 定义过渡效果何时开始 ( transition-delay )