CSS3实用技巧与特性-优快云博客

本文介绍了9种CSS3的实用属性与使用技巧，包括圆角效果、阴影、媒体查询、渐变填充、背景尺寸、自定义字体、清除浮动、居中与隐藏溢出等，帮助网页设计更具吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式详解

字体样式(font)

字体

font-family:字体名
font-family:字体名1，字体名2...
font-family: fantasy | monospace | ncursive | serif | sans-serif

字体系列
cursive：模拟手写的字体，通常这类字体的曲线比较明显。
monospace：无比例的字体。通常用于模拟打字机中打出来的文字，也就是等宽字体。
serif：有比例有衬线的字体，这种字体中的所有字母都根据不同需要占有不同的宽度，有衬线是指在字母上做装饰的细线。
sans-serif：有比例无衬线的字体，这种字体中的所有字母都根据不同需要占有不同的宽度。

文字大小

xx-small：文字显示为最小(绝对)；
x-small：文字显示为较小(绝对)；
small：文字显示为小(绝对)；
medium：默认值(绝对)
large：文字显示为大(绝对)；
x-large：文字显示为较大(绝对)；
xx-large：文字显示为最大(绝对)；
larger：增大(相对)；
smaller：减小(相对)；
长度：数值加上单位；
百分比：相对字体大小。

文字大小调整

在英文方面，一段文字看上去是否舒服，很大程度上取决于当前字体的高度与这种字体的小写x字母高度的比值，这个比值称为字体的面值。

font-size-adjust: none | number

none：不改变文字大小；
number：强制文字使用面值。

粗体

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

normal：默认值(400)，正常粗细；
bold：加粗(700)；
bolder：比normal粗，比bold细；
lighter：不比normal粗；
x00：分9个级别，数值越大越粗。

斜体

font-style: normal | italic | bolique

normal：默认值，代表正常的字体；
italic：斜体；
bolique：倾斜的字体。

文字变形－小型大写字母

fontvariant: normal | small-caps

normal：默认值；
small-caps：小型大写字母

小型大写字母指将字母更改为大写字母，并且该大写字母比通常的大写字母要小。

文字变形－文字拉伸

normal：默认值，不拉伸变形；
narrower：水平方向变窄；
wider：水平方向变宽；
condensed：压缩文字；
extra-condensed：压缩得很小；
ultra-condensed：压缩得特别小；
semi-condensed：从大到小逐步缩小；
semi-expanded：从小到大逐步变大；
expanded：拉伸文字；
extra-expanded：拉伸得很大；
ultra-expanded：拉伸得特别大。

PS：font-stretch是CSS2中所规定的属性，目前还没有浏览器可以支持该属性。

修饰

text-decoration: none | underline | overline | line-through | blink

none：默认值，无修饰样式；
underline：下划线；
overline：上划线；
line-through：贯穿线；
blink：闪烁。

阴影

none：不设置；
color：阴影的颜色；
length：长度值；
inherit：继承父级样式。

阴影有3个length要进行设置，分别是水平方向的距离、垂直方向的距离和模糊半径的长度(不能为负值)。

大小写转换

text-transform: capitalize | uppercase | lowercase | none | inherit

capitalize：首字母大写；
uppercase：变大写；
lowercase：变小写；
none：不改变；
inherit：继承。

间距－行间距

行间距：文本行与行之间的距离

line-height: normal | number | length | 百分数 | inherit

normal：默认值；
number：在当前文字大小的基础上再做增加来设置行高(不能为负值)；
length：指定行高数(不能为负值)；
百分数：用百分数表示行高；
inherit：继承。

行高是指上一行文字的基线与下一行文字之间的基线之间的距离，行高等于行间距加上文字高度。

间距－字间距

letter-spacing: normal | length | inherit

normal：默认值；
length：字间距的大小；
inherit：继承。

词间距

word-spacing: normal | length | inherit

normal：默认值；
length：词间距的大小；
inherit：继承。

文本样式

文字缩进

text-indent: length | 百分数 | inherit

length：缩进量；
百分数：父级元素的百分比；
inherit：继承。

水平对齐

left：左对齐；
right：右对齐；
center：居中对齐；
justify：两端对齐；
string：字符对齐，多用于表格里；
inherit：继承。

垂直对齐

baseline：默认值，基线对齐；
sub：下标；
super：上标；
top：顶端对齐；
text-top：文本行顶端对齐；
middle：中间对齐；
bottom：底端对齐；
text-bottom：文本行底端对齐；
百分数：相对于父级元素的基线的百分比；
length：调整长度；
inherit：继承。

文字方向－文本流入方向

derection: ltr | rtl | inherit

ltr：left to right，默认值，从左到右流入；
rtl：right to left，从右到左流入；
inherit：继承。

文字方向－文字方向

unicode-bidi: normal | embed | bidi-override | inherit

normal：默认值，不打开流入的文字，对其文字不重排；
embed：打开流入的文字，在对象内部进行隐式重排；
bidi-override：严格按流入方向重排文字；
inherit：继承。

文字方向－竖排文字

layout-flow: horizontal | vertical-ideographic

horizontal：书写方向从左到右，由上而下；
vertical-ideographic：书写方向从上至下，由左至右。

空格处理

white-space: normal | pre | nowrap | inherit

normal：默认值，浏览器自动忽略多余的空格，连续多个空格只显示一个；
pre：类似于pre元素，浏览器不忽略源代码的空格；
nowrap：不自动换行；
inherit：继承。

词间换行

word-break: normal | break-all | keep-all

normal：默认值，对于英文则以单词为单位换行，对于中文则以字为单位换行；
break-all：英文以字母为单位换行；
keep-all：对于英文以单词为单位换行，对于中文则以标点或空格为单位换行。

首字样式

使用伪元素fitst-letter，对于英文则代表第一个字母，对于中文则代表第一个文字。

首行样式

使用伪元素first-line，设置第一行文字的样式。

颜色与背景样式

文本颜色：指文本的颜色。

color: 颜色 | inherit

颜色：使用指定颜色值；
inherit：继承。

背景色：指元素后面背景的颜色。

background: transparent | 颜色 | inherit

transparent：设置透明，默认值；
颜色：使用指定颜色值；
inherit：继承。

背景图片

background-image: none | url(路径) | inherit

none：无背景图片(默认值)；
url(路径)：图片的URL地址；
inherit：继承；

背景附件：指背景图片如何依附元素。

background-attachment: scroll | fixed | inherit

scroll：滚动，随内容滚动，默认值；
fixed：固定，不随内容滚动；
inherit：继承。

背景重复

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

repeat：重复，平铺图片，默认值；
no-repeat：不重复，不平铺图片；
repeat-x：水平方向重复；
repeat-y：垂直方向重复；
inherit：继承。

背景定位：背景图片的定位，要设置两个值，分别是相对于元素左上角的x轴和y轴，默认是0px。

top：顶部；
center：中部；
bottom：底部；
left：左侧；
right：右侧；
数值：用数值指定图片的位置；
百分数：用百分数表示位置；
inherit：继承；

背景综合应用(可节省代码)

background: background-color | background-image | background-repeat | background-attachmen | background-position

background-color：颜色；
background-image：图片；
background-repeat：重复方式；
background-attachmen：附件；
background-position：定位。

方框样式

宽度与高度

数值：用数值设定宽度或高度；
百分比：用百分比设定宽度或高度；
auto：自动(默认值)，由浏览器设置；
inherit：继承。

边框－边框宽度

medium：默认宽度；
thin：比默认宽度小；
thick：比默认宽度大；
数值：用数值设定；
inherit：继承。

border-width表示全部的边框，可统一设置4个值。

边框－边框样式

none：没有边框(默认值)；
hidden：隐藏边框；
dotted：点划线；
dashed：虚线；
solid：实现：
double：双线：
groove：凹槽立体边框；
ridge：凸槽立体边框；
inset：凹边立体边框；
outset：凸边立体边框。

PS：IE不支持hidden属性。

border-style表示全部边框样式，可统一设置4个值。

边框－边框颜色

颜色：设定颜色值；
transparent：透明颜色，即不设置。

border-color表示全部边框的颜色，可统一设置4个值。

边框综合设置

border-width：边框宽度；
border-style：边框样式；
border-color：边框颜色；
border-inherit：继承。

border表示全部边框。

边距(margin)：指对一个象与其它对象之间的距离。

长度：用数值设定长度；
百分比：用百分比设定长度；
auto：自动；
inherit：继承。

margin表示所有边的边距，可统一设置4个值。

填充(padding)：指对象内容与对象边框之间的距离，可以理解成盒子里增加填充物。

padding: 长度 | 百分比 | inherit
padding-top: 长度 | 百分比 | inherit
padding-left: 长度 | 百分比 | inherit
padding-right: 长度 | 百分比 | inherit
padding-bottom: 长度 | 百分比 | inherit

长度：用数值设定长度；
百分比：用百分比设定长度；
inherit：继承。

padding表示所有边的距离，可统一设置4个值。

轮廓(outline)：指作用在边框之外的一种样式。

轮廓与边框的区别是：轮廓不占用空间，轮廓不一定是矩形。

轮廓－轮廓宽度

outline-width: medium | thin | thick | 数值 | inherit

medium：默认宽度；
thin：比默认宽度小；
thick：比默认宽度大；
数值：用数值设定；
inherit：继承。

轮廓－轮廓颜色

outline-color: 颜色 | invert | inherit

颜色：设定颜色值；
invert：相反，使用与背景色相反的颜色；
inherit：继承。

轮廓－轮廓样式

none：没有轮廓(默认值)；
hidden：隐藏轮廓；
dotted：点划线；
dashed：虚线；
solid：实现：
double：双线：
groove：凹槽立体轮廓；
ridge：凸槽立体轮廓；
inset：凹边立体轮廓；
outset：凸边立体轮廓。

轮廓－综合设置

outline: outline-color | outline-style | outline-width

outline-color：颜色；
outline-style：样式；
outline-width：宽度；

表格样式

边框合并

表格存在两种边框，一种是表格本身的边框，另一种是单元格的边框，默认情况下，两种不同的边框是分开显示的，边框合并就是把这两种边框和起来。

border-clooapse: collapse | separate | inherit

collapse：合并两种边框；
separate：两种边框独立(默认值)；
inherit：继承。

边框间距

border-spacing: 宽度 | inherit

宽度：用数值设定宽度；
inherit：继承。

表格标题位置

caption-side: top | bottom | left | right | inherit

top：顶部；
bottom：底部；
left：左侧；
right：右侧；
inherit：继承。

无内容单元格边框：设置无内容的单元格是否显示边框。

empty-cells: show | hide | inherit

show：显示(默认值)；
hide：隐藏；
inherit：继承。

保持表格布局：当单元格里对象的宽度超过指定宽度时，表格是否自动调整列宽度。

table-layout: auto | fixed | inherit

auto：自动(默认值)，能换行则换行，否则增加宽度。
fixed：固定，宽度不变。
inherit：继承

标题阅读方式：指语音阅读器对表格标题的阅读方式。

speak-header: once | always | inherit

once：只朗读一次(默认值)；
always：多次朗读；
inherit：继承；

列表样式

列表－项目符号图像

list-style-image: none | url(路径)

none：没有图像；
url(路径)：图片文件的URL地址。

列表－项目符号类型

circle：空心圆；
disc：实心圆(默认值)；
decimal：阿拉伯数字；
square：实心方块；
upper-roman：大写罗马数字；
lower-roman：小写罗马数字；
upper-alpha：大写英文字母；
lower-alpha：小写英文字母；
none：不适用项目符号；
armenian：传统的亚美尼亚数字，目前主流浏览器未支持该属性值；
cjk-ideographic：表意数字，目前主流浏览器未支持该属性值；
georgian：乔治数字，目前主流浏览器未支持该属性值；
hebrew：希伯莱数字，目前主流浏览器未支持该属性值；
lower-greek：希腊小写字母，目前主流浏览器未支持该属性值；
hiragana：日文平假名字符，目前主流浏览器未支持该属性值；
hiragana-iroha：日文平假名序号，目前主流浏览器未支持该属性值；
katakana：日文片假名字符，目前主流浏览器未支持该属性值；
katakana-iroha：日文片假名序号，目前主流浏览器未支持该属性值；
lower-latin：小写拉丁字母，目前主流浏览器未支持该属性值；
upper-latin：大写拉丁字母，目前主流浏览器未支持该属性值；

列表－项目符号定位

list-style-position: outside | inside

outside：将项目符号放在文本块之内(默认值)；
inside：将项目符号放在文本块之外。

列表－间距：指主容器与标记容器之间的间距。

marker-offset: auto | length

auto：自动(默认值)，由浏览器自动设置；
length：设定间距的指。

PS：目前主流浏览器对marker-offset属性都不支持。

列表－综合设置

list-style: list-style-image | list-style-type | list-style-position

list-style-image：图像；
list-style-type：类型，图像无法正常显示时才使用；
list-style-position：定位。

滚动条样式

PS：滚动条样式不属于CSS标准，是微软为自己的IE浏览器滚动条专门设置的一个样式。

滚动条－颜色

scrollbar-face-color: 颜色

滚动条－基准颜色

scrollbar-base-color: 颜色

滚动条－拖动区域颜色

scrollbar-track-color: 颜色

滚动条－方向箭头颜色

scrollbar-arrow-color: 颜色

滚动条－亮边框颜色

scrollbar-3dlight-color: 颜色

滚动条－暗边框颜色

scrollbar-shadow-color: 颜色
scrollbar-darkshadow-color: 颜色

滚动条－3D亮边颜色

scrollbar-highlight-color: 颜色

超级链接样式：使用锚伪类来设定。

未访问前的样式
a:link
鼠标停留时的样式
a:hover
单击时的样式
a:active
访问后的样式
a:visited

版式

定位(position)：指块采用的定位方式及位置。

定位－定位的模式

position: static | relative | absolute | fixed | inherit

static：静态定位模式(默认值)，即无特殊定位，按照文档流的顺序排列；
relative：相对定位模式，相对于原来位置的定位方式；
absolute：绝对定位模式，摆脱文档流作为一层来定位；
fixed：固定模式，相对于浏览器的定位，即网页滚动时固定不变；
inherit：继承。

定位－偏移：3种模式(relative,absolute,fixed)都需要使用偏移属性设定定位的位置。

层叠：对象与对象之间会有层叠性。

层叠的原则：
1.子对象层叠在父对象之上；
2.兄弟对象根据z-index属性来确定次序；
3.如果兄弟对象的z-index属性值相同，则后出现的对象层叠在先出现的对象之上。

层叠次序：设定层重叠时的叠放次序。

z-index: auto | 数值 | inherit

高度与宽度

限制(最小高度，最小宽度，最大高度，最大宽度)

浮动－浮动：即对象的对齐方式,理解为元素从文档六中脱离出来。

float: none | left | right | both | inherit

浮动－清除：清除浮动效果，即浮动对象旁边不允许有浮动对象。

none：不清除浮动(默认值)；
left：不允许左边有浮动对象；
right：不允许右边有浮动对象；
both：两边都不允许有浮动对象；
inherit：继承。

溢出与剪切：当一个对象的大小无法容纳内容时即产生溢出的情况，有溢出就需要处理。

溢出

overflow: visible | hidden | scroll | auto | inherit

visible：可见(默认值)，对于IE则自动调整对象大小，对于其他三大浏览器则显示在对象之外；
hidden：隐藏；
scroll：添加滚动条；
auto：自动；
inherit：继承。

剪切：在对象上划分一部分区域显示，其余区域则隐藏。

clip: auto | rect(上右下左) | inherit

auto：自动(默认值)，通常不剪切；
rect：根据4个值来划分显示区域；
inherit：继承。

PS：clip不能作用在用static或relative定位的对象上。

对象的显示：设定对象的可见性。

visibility: visible | hidden | collapse | inherit

visible：可见；
hidden：隐藏；
collapse：隐藏表格的行或列；
inherit：继承。

区块的显示：设定对象的显示方式。

inline：内联，以内联对象的形式显示；
block：块，对象以块形式显示；
list-item：列表形式，可添加项目符号；
run-in：追加，根据上下文举鼎以块元素或内联元素的形式显示；
compact：紧凑，同上；
marker：标记，指定对象出现在父级对象之前或之后，使用该属性必须与:after或:before伪类一起使用；
table：表格，以表格形式显示；
inline-table：内嵌表格，将表格以内联对象的形式显示；
table-row-group：表格行组，像表格一样，用多行来显示类似于tbody元素；
table-header-group：表格标题组，像表格一样，用多行来显示类似于thead元素；
table-footer-group：表格注脚组，像表格一样，用多行来显示类似于footer元素；
table-row：表格行，以表格行的形式来显示，类似于tr元素；
table-columu-group：表格列组，以多列的形式显示，类似于colgroup元素；
table-columu：表格列，类似于col元素；
table-cell：表格单元格，类似于td或th元素；
table-caption：表格标题，类似于caption元素；
none：没有，不显示；
inherit：继承。

光标样式

光标(cursor)：即鼠标指针样式。

auto：自动；
all-scroll：可滚动光标；
col-resize：水平可拖动的光标；
crossshair：十字光标；
default：默认光标；
hand：手型光标；
move：移动光标；
help：带问号的光标；
no-drop：手型+禁止的光标；
not-allowed：禁止光标；
pointer：手型光标；
progress：沙漏光标；
row-resize：垂直可拖动的光标；
text：文本型光标；
vertical-text：竖排文本型光标；
wait：等待光标；
e-resize：指向正东方调整大小的光标；
ne-resize：指向东北方向调整大小的光标；
nw-resize：指向西北方向调整大小的光标；
n-resize：指向正北方向调整大小的光标；
se-resize：指向东南方向调整大小的光标；
sw-resize：指向西南方向调整大小的光标；
s-resize：指向正南方向调整大小的光标；
w-resize：指向正西方向调整大小的光标；
url(路径)：光标文件的URL地址；
inherit：继承。

打印控制

插入分页符

auto：自动(默认值)，需要时才插入；
always：始终插入分页符；
avoid：避免插入分页符；
left：插入分页符，直到对象出现在一个左边的空白页上；
right：插入分页符，直到对象出现在一个右边的空白页上；
inherit：继承。

页面标记

marks: crop | cross | none | inherit

crop：指定切割标记；
cross：指定交叉线作用页面标记；
none：无；
inherit：继承。

PS：目前四大浏览器都还没有支持该属性。

上下边行距

orphans: 整数 | inherit
windows: 整数 | inherit

整数：指定行数，默认值为两行；
inherit：继承。

页面大小

size: 数值 | auto | portrait | landscape | inherit

数值：两个值，高度和宽度；
auto：自动；
portrait：横向；
landscape：纵向；
inherit：继承。

PS：目前该属性只有Opera浏览器支持。

页面版式

使用@page来设置。

@page 伪类 {样式}

伪类：可以为:first(默认)、:left或:right，分别代表第一页的样式、位于装订线左边所有页面的样式和位于装订线右边所有页面的样式。
样式：使用打印控制的样式。

页属性：为块元素指定特殊的页属性。

page: 标识符 | auto

标识符：用于指定使用哪个@page的属性；
auto：参照当前的默认页面。

声音样式

发音控制－是否发音

speak: normal | none | spell-out | inherit

normal：普通(默认值)，使用当前语言的正常发音方式；
none：取消发音；
spell-out：以字为单位来朗读，对于英文单词则以一个个字母的方式朗读；
inherit：继承。

发音控制－数字朗读方式

speak-numeral: digits | continuous | inherit

digits：逐位朗读数字；
continuous：以默认语言对数据的词语描述来朗读；
inherit：继承。

发音控制－标点朗读方式

speak-punctuation: code | none | inherit

code：朗读标点符号；
none：不朗读标点符号，只稍作停顿；
inherit：继承。

音量控制

数字：正整数，取值范围为0～100；
百分数：用百分比来设定；
silent：不发音；
x-soft：0音量；
soft：25音量；
medium：50音量
loud：75音量；
x-lund：100音量；
inherit：继承。

声音类型

voice-family: male | female | child | 声音名 | inherit

male：男声；
female：女声；
child：童音；
声音名：声音名称，用双引号括起来；
inherit：继承。

语速控制

数字：正整数，设定每分钟朗读的字数；
x-slow：较慢，每分钟80字；
slow：慢，每分钟120字；
medium：正常(默认值)，每分钟180到200字；
fast：快每分钟300字；
x-fast：较快每分钟500字
faster：更快，每分钟增加40字；
slower：更慢，每分钟减少40字；
inherit：继承.

暂停控制

pause: 时间 | 百分数 | inherit
pause-after: 时间 | 百分数 | inherit
pause-before: 时间 | 百分数 | inherit

声音提示

背景声音：让朗读器一边朗读内容一边播放音乐。

url：声音的URL地址；
mix：不停止父级元素的背景声音；
repeat：重复播放背景声音；
auto：让父级元素的背景声音继续播放(默认值)；
none：停止父级元素背景声音的播放(默认值)；
inherit：继承。

空间属性－音场设置：用于控制声音的水平角度

角度：声音的角度，单位为deg(度)，取值范围为-360deg～360deg；
left-side：相当于270deg或90deg的角度值；
far-left：相当于300deg或-60deg的角度值；
left：相当于320deg或-40deg的角度值；
center-left：相当于340deg或-20deg的角度值；
center：正前方(默认值)，角度值为0deg；
center-right：相当于20deg或-340deg的角度值；
right：相当于40deg或-320deg的角度值；
far-right：相当于60deg或-300deg的角度值；
right-side：相当于90deg或-270deg的角度值；
behind：以180deg减去正常值；
leftwards：相对于继承值或绝对参考角度减20deg；
rightwards：相对于继承值或绝对参考角度加20deg；
inherit：继承。

空间属性－音源高度设置

角度：设定声音的角度，单位为deg(度)，取值范围为-90deg～90deg；
below：相当于-90deg的角度值；
level：相当于0deg的角度值(默认值)；
above：相当于90deg的角度值；
higher：相对于继承值或绝对参考角度减10deg；
lower：相对于继承值或绝对参考角度加10deg；
inherit：继承。

语调控制－语调属性

数字：指定语调；
x-low：比low频率还要低；
low：比正常频率要低；
medium：正常频率；
high：比正常频率要高；
x-high：比high频率还要高；
inherit：继承。

语调控制－语调范围

pitch-range: 数字 | inherit

数字：语调的平滑程度，取值范围为0～100；
inherit：继承。

重音设置

richness: 数字 | inherit

数字：重音程度，取值范围为0～100，默认值为50；
inherit：继承。

激昂程度设置

stress: 数字 | inherit

数字：激昂程度，取值范围为0～100，默认值为50；
inherit：继承。

内容

添加内容

字符串：要添加的内容，用双引号括起来；
url：扩展文件的URL地址；
计数器：4种形，counter(name)、counter(name, list-style-type)、counter(name, string)、counter(name, string, list-style-type)，其中name为计数器名，list-style-type为属性，string为所有已命名的计数器；
attr(X)：使用对象某个属性值的文字，X代表属性名；
open-quote：插入quotes属性的前标记；
close-quote：插入quotes属性的后标记；
no-open-quote：不插入quotes属性的前标记；
no-close-quote：不插入quotes属性的后标记；
inherit：继承。

使用伪元素:after和:before可设置在内容前或后插入。

计数器－计数

counter-increment: 计数器名递增数 | none | inherit

计数器名：由content属性创建的计数器名称；
递增数：计数器每次增加的数量，默认为1；
none：不增加计数；
inherit：继承。

计数器－复位

counter-reset: 计数器名复位数 | none | inherit

计数器名：由content属性创建的计数器名称；
复位数：计数器恢复的数值，默认为0；
none：不复位；
inherit：继承。

PS：四大浏览器只有Opera浏览器支持该功能。

嵌套标记：用于设置不同的引用标记。

quotes: 字符串 | none | inherit

滤镜

PS：只有IE才支持。

略

注释

代码压缩方式：使用综合设置的方法，同类型样式用多个值设置。

4条边的设置顺序：从上开始，按顺时针方向移动，上，右，下，左。

名词解释

四大浏览器：IE、Net scape、Opera、Fire fox。

一个网页设计师脑子里一定会被大量与他的工作有关的知识填满。而说到 CSS，它可以帮助对网站进行设计，让设计具有更多的可能性，用更简单的方式让你的网站更具吸引力，而使用传统的技术这些方面并不容易面面俱到。

　　对于前端，页面而言，CSS 的确是一门首选需要掌握的技能。以下就是 9 种非常实用的 CSS3 属性和使用技巧。

　　1. 圆角效果

　　谈及圆角小编曾在各种讨论中频繁听见：实现麻烦、兼容困难、性能不佳等等缺点。而如今的 Web 设计需要的就是各种各样新的开发技巧，因此越来越多的前端和页面都开始使用 HTML5。

　　对于 HTML5 而言，从前必须使用图片来实现的需求，现在都可以通过代码来实现。而 CSS3 中加入的“border-radius”就可以用通过它来直接定义 HTML 元素的圆角，并支持所有浏览器的最新版本。

　　我可以通过如下代码实现：

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

　　我们也可以使用下面这样的组合版本，或者用它来对上面的代码进行速记。

-moz-border-radius: 10px 20px 30px 0;

　　而 IE 浏览器对 CSS3 属性支持，可以从这篇英文文章进一步了解。

　　2. 阴影效果

　　另一个 CSS3 可实现的有趣功能是阴影效果（box-shadow），通过“box-shadow”可以非常简单的实现该功能。我们常见的主流浏览器都支持这个属性，而 Safari 浏览器支持可选加前缀的-webkit-box-shadow 属性。

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

　　而如下的 JavaScript 代码也能实现同样的阴影效果：

object.style.boxShadow="20px 10px 7px #ccc"

　　3. @Media 属性

　　@Media 可以直接指定应用样式引入媒体属性，用于相同样式针对不同屏幕尺寸的网页风格变化，它也有助于响应式网页设计中的造型变化。通过简单的修改如下代码就能实现。

@media screen and (max-width: 480px) {

}

　　而使用如下的@media print 甚至可以指定 CSS 的打印预览：

@media print
{
p.content { color: #ccc }
}

　　4. 添加一个渐变填充

　　在 CSS3 中的渐变效果是另一个让人惊叹的属性。它目前还未得到全部浏览器的支持，因此最好不要完全依赖它来设置布局。而这里有一个基于 CSS 的梯度导航栏可以让大家参考一下。

　　以下是实现的方式。

background: -webkit-gradient (linear, left top, left bottom, 
from (darkGray), to (#7A7A7A));

　　5. 背景尺寸

　　背景尺寸（Background size）是 CSS3 中最实用的效果之一，目前很多浏览器都已经支持。Background size 属性可以让你随心所欲的控制背景图的尺寸大小。

　　从前用于背景的图像大小在样式中是不可调整的，如果你无法想象那样有多么糟糕，可以试着回忆一下，在自己的电脑桌面上做壁纸的时候遇到一张合乎心意却偏偏与桌面尺寸不合的图片，只能通过平铺来填充。

　　那样的桌面丑的让一个审美观及格的人都会有砸屏幕的冲动。而现在我们可以通过改变一行代码让背景图片适应自己的页面。

div
{
background:url (bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

　　6 @font face

　　属性在使用 CSS3 针对各种字体进行转变的时候已经充分证明了它的实用性。从前因为各种字体许可的问题，在设计过程中只能选择几种特定的字体。而通过@font face 我们就能自定义字体的名称：

@font-face
{
font-family: mySmashingFont;
src: url ('blitz.ttf')
,url ('blitz.eot'); /* IE9 */

}

　　而后我们能通过一个简单的代码，随时随地的使用自定义的 mySmashingFont 字体系列

div
{
font-family:mySmashingFont;
}

　　7. clearfix 属性

　　如果 Overflow: hidden 清除浮动的效果实在不是你的首选，那么 clearfix 应该是你更好的选择，它可以让你个别处理不同的 HTML 元素。

.clearfix {
display: inline-block;
}

——

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

　　8. Margin: 0 auto

　　Margin: 0 auto 实现的是 CSS 中最基础的功能，我们常常也会用它来实现最简单也最常用的功能—居中。虽然 CSS 本身没有一个指定居中的功能，但是通过 auto margin 指定一个边距仍然能非常简单的就实现居中这个功能。

　　通过这个属性，用一段简单的代码就能实现元素的居中。但需要注意的是，就像以下代码中那样，必须给 div 设定一个宽度。

.myDiv {
margin: 0 auto;
width:600px;

}

　　9. Overflow: hidden

　　Overflow：Hidden，它做作用主要是隐藏溢出，而就像上述提到的，人们都很少用到其另外一个功能，就是清除浮动。

div
{
overflow:hidden;
}

　　Via：Smashing HUB