CSS

Posted 2021-12-20 njzy-yuan

CSS

css的三种引入方式:

1.行间式：

--<div style=''></div>

-- 在标签头部的style属性内

--属性值满足的是css语法

--属性值用key：value形式赋值，value具有单位

--属性之间用;隔开

2.内联式：

--在style标签内（style标签一半作为head的子标签）

--属性值满足的是css语法

--属性值用key：value形式赋值，value具有单位

--属性之间用;隔开，一般独占一行

--格式：选择器样式块

style块一般放在最下面，这样能对下面的所有的样式进行样式定制

3.外联式：

--在外部css文件中

--属性值满足的是css语法

--属性值用key：value形式赋值，value具有单位

--属性之间用;隔开，一般独占一行

--格式：选择器样式块

--将html与css文件建立联系；html通过link标签链接外部css

<link href=''></link>

4.三种引入方式的优先级:

三种方式间没有优先级:
--三种方式协同布局

--不重复的属性一定为唯一位置的唯一值

--重复的属性采用覆盖赋值，保留最后位置的属性值

--行间式一定是逻辑上最后的被解析的位置(js正常操作的就是行间式)

--！import 会影响优先级

长度

• px：像素，屏幕上显示的最小单位，用于网页设计，直观方便
• mm:毫米
• cm：厘米
• in:英寸
• pt：点，1pt=1/12in，用于印刷业
• em:相当长度，通常1em=16px,应用于流式布局
• vw: 50vw; 50% view width 流式布局

颜色

• rgb(0,0,0) 范围是0-255
• rgba(0,0,0,0) 最后一位为透明度

文本样式：

字体属性：(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;(表格标题) /display 属性的了解很模糊/

方框属性： (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文字属性：

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(/dot.gif); /图片式符号/

list-style-position: outside; /凸排/

list-style-position:inside; /缩进/

四、CSS背景样式：

background-color:#F5E2EC; /背景颜色/

background:transparent; /透视背景/

background-image : url(/image/bg.gif); /背景图片/

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

css布局九决，学css不再难简单的几句CCS布局口诀，就可以写出精简，标准的样式。

一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、三像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是隐患；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

css选择器

一、常用的选择器

元素选择器

作用：通过元素选择器可以选则页面中的所有指定元素
语法：标签名  

id选择器

作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值  

类选择器

作用：通过元素的class属性值选中一组元素
语法：.class属性值 

并集选择器

作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N 

交集选择器

作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N 

通配选择器

作用：他可以用来选中页面中的所有的元素
语法：* 

二、子元素和后代元素选择器

元素之间的关系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素   

后代元素选择器

作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素 

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

三、伪类选择器

伪类专门用来表示元素的一种的特殊的状态。
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

举例

  :link
  作用：表示普通的链接（没访问过的链接）

  :visited
  作用：表示访问过的链接

  :hover
  作用：表示鼠标移入的状态

  ：active
  作用：表示的是超链接被点击的状态

  :focus
  作用：表示文本框获取焦点

ps:  :hover和:active也可以为其他元素设置(ie6不支持)

四、伪元素选择器

概述：使用伪元素来表示元素中的一些特殊的位置
举例

p:first-letter
作用：选择p中第一个字符

p:first-line
作用：选择p中的第一行

:before
作用：表示元素最前边的部分，  一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容

:after
表示元素的最后边的部分

五、属性选择器

概述：可以根据元素中的属性或属性值来选取指定元素
示例

[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值以包含指定内容的元素

六、子元素、兄弟元素选择器以及否定伪类

子元素选择器举例

:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child(XXX) 可以选中任意位置的子元素,该选择器后边可以指定一个参数，指定要选中第几个子元素,even 表示偶数位置的子元素,odd 表示奇数位置的子元素。

:first-of-type、:last-of-type、:nth-of-type
和:first-child这些非常的类似，只不过child，是在所有的子元素中排列，而type，是在当前类型的子元素中排列

兄弟选择器举例：

前一个元素 + 后一个元素
作用：可以选中一个元素后紧挨着的指定的兄弟元素

前一个元素 ~ 后边所有元素
作用：选中后边的所有兄弟元素

否定伪类举例

作用：可以从已选中的元素中剔除出某些元素

七、选择器的优先级别

概述
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示。

规则

内联样式 ， 优先级  1000
id选择器，  优先级   100
类和伪类，  优先级   10
元素选择器，优先级 1 
通配* ，    优先级 0
继承的样式，没有优先级

其他情况：

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。
并集选择器的优先级是单独计算 div , p , #p1 , .hello 。

可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important。

盒子模型

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。

盒子的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

为了显得专业一点，我们还可以用带属性的公式表示：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面说到的是 默认 情况下的计算方法，另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值

content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去外边距、边框和内边距才能得到内容的宽度和高度。

inherit：规定应从父元素继承box-sizing属性的值。

盒子成分分析

margin
margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
开发者也可以直接使用简写属性margin同时设置四条边的宽度。

margin示例1

/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

margin示例2

/*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

margin示例3

/*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

margin示例4

/margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距/

margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

padding

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
开发者也可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与上面的margin类似，可以参考margin的四个实例。

border
border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

border实例1

/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。

border-width：边界宽度
border-style：边界样式
border-color：边界颜色
border-sytle属性可取值：

none：定义无边框。
hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：定义 3D inset 边框。其效果取决于 border-color 的值。
outset：定义 3D outset 边框。其效果取决于 border-color 的值。
inherit：规定应该从父元素继承边框样式。

border实例2

/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;
这还不算完，开发者还可以对单独一条边界单独设置宽度、样式或颜色。以上两组属性都可以作为下面属性的简写属性。
border-top-width：上边界宽度
border-top-style：上边界样式
border-top-color：上边界颜色
border-bottom-width：下边界宽度
border-bottom-style：下边界样式
border-bottom-color：下边界颜色
border-left-width：左边界宽度
border-left-style：左边界样式
border-left-color：左边界颜色
border-right-width：右边界宽度
border-right-style：右边界样式
border-right-color：右边界颜色

border实例3

/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面简写样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;
/*下面的样式与上面简写样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
/*下面样式又与上面三个样式的任意一个样式等价*/
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: green;

上面的属性是对各边的宽度、样式和颜色进行设置，下面一些有趣的属性可以让盒子变得更加地有创意、更加好看。

首先，了解一下 边界半径 ，也就是圆角。边界半径由属性border-radius进行控制，这是一个简写属性，像上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-left-radius：右下角
边界半径可以使用 px、em 等长度单位，也可以使用百分数。

border-radius值的个数以及每个值对应控制的位置：

一个值：设置四个角有相同的边界半径；
两个值：第一个值设置左上角和右下角，第二个值设置右上角和左下角；
三个值：第一个值设置左上角，第二个值设置右上角和左下角，第三个值设置右下角；
四个值：第一个值设置左上角，第二个值设置右上角，第三个值设置右下角，第四个之设置左下角。

border实例4

/*以简写属性的三个值为例*/
border-radius: 10px 20px 30px;
/*下面样式与上面简写属性样式等价*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

开发者还可以设置x半径和y半径的不同，创建椭圆形角。x半径表示水平半径，y半径表示垂直半径。在border-radius属性中，x半径和y半径用“/”分隔，在border-top-left等四个属性中，传入两个值，第一个值表示x半径，第二个值表示y半径。

border实例5

/*简写属性的x半径设置两个值，y半径设置三个值*/
border-radius: 30px 20px / 20px 10px 30px;
/*在简写属性中设置角度时，值与盒子角的映射是x和y分开的，按照上面提到的规则进行映射*/
/*x半径两个值，第一个值控制左上角和右下角，第二个值控制右上角和左下角*/
/*y半径三个值，第一个值控制左上角，第二个值控制右上角和左下角，第三个值控制右下角*/
border-top-left-radius: 30px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 20px 10px;

图形边界

图形边界是用图形来作为盒子的边界border。我将这一部分单独作为一个小节的原因是，图形边界border-image是CSS3新增的内容，实现起来比较复杂，而且只有一些版本比较新的主流浏览器支持。

在这只图形边界之前，需要先设置一个边界，让图形有显示的空间，同时也可以让不支持图形边界的浏览器显示这个预先设定好的非图形边界。然后，还需要将背景颜色和背景图片限制在填充和内容之内（默认情况下，背景颜色和背景图片作用在border，padding和content，边界的样式浮在背景之上），这需要用到background-clip属性。

background-clip属性的值：

border-box：背景延伸到边框外沿（但是在边框之下）。
padding-box：边框下面没有背景，即背景延伸到内边距外沿。
content-box：背景裁剪到内容区 (content) 外沿。
text：背景被裁剪为文字的前景色(只有chrome支持)。

在图形边界中用到以下属性：

border-image：设置图形边界，简写属性
border-image-source：图形的来源（路径），可以接收一个URL函数或一个渐变作为值。
border-image-slice：图形的切片大小
border-image-width：图形边界的宽度
border-image-repeat：定义图片如何填充边框
border-image-outset：定义边界内部和内边距之间的额外空间的大小
可能有很多小伙伴看不懂，没关系，下面对以上属性进行详细的解释。

border-image-source

从图形的来源开始说起。图形的来源可以是一个图片或者渐变颜色。设置图片用URL(path)函数，设置渐变颜色用linear-gradient(to top|bottom|left|right, beginColor1, endColor2)函数。还有一个默认值none，当使用默认值的时候，或者如果图像无法显示，则使用边框样式border-style。有了图形还不行，还需要对图形进行切割，才能够应用到边界上。

border-image-slice

该属性将图片切割成9个区域，包括四个角，四条边以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

上图中，四条切片线将图片切成了9份。其中1、2、3、4为四个角区域，将会对应应用到盒子边界的四个角；5、6、7、8为四个边界区域，将会对应应用到盒子边界的四条边；区域9为中心区域，默认情况下会被丢弃，但如果设置了fill关键字（可以被设置在属性的任何一个位置(前面、后面或者两个值之间)），则会将其作为背景图形。

border-image-slice属性的值可以是数字或百分数，还有关键字fill。值的个数可以是1-4个，其规则与margin、padding等属性一样。

border-image-repeat
该属性设置图片在边框的填充方式。值的个数可以是一个或两个，一个值时设置所有的边框，两个值时分别设置水平与垂直的边框。它具有下面的值：

stretch：拉伸图片以填充边框。
repeat：平铺图片以填充边框。
round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
space：平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）
inherit：继承父级元素的计算值。

border-image-width

设置图形边界的宽度。当border-image-width的值大于border-width时，图形不会向margin方向扩展，而是会向padding和content方向扩展，覆盖。

border-image-width属性的值可以是长度或百分数，以及auto。值的个数为1-4个，其规则与margin、padding等属性的规则一致。

border-image-outset

该属性设置边框图像可超出边框盒的大小。讲的通俗一点，就是在图像和padding之间增加一些填充，将边框图像往外挤。它的值可以是长度或百分数，值的个数为1-4个，其规则与margin、padding等属性的规则一致。

border-image

该属性是一个简写属性，他可以设置上面提到的五个属性，其基本语法如下：

<‘border-image-source‘> || <‘border-image-slice‘> [ / <‘border-image-width‘> | / <‘border-image-width‘>? / <‘border-image-outset‘> ]? || <‘border-image-repeat‘>
1
关于“||”、“?”等符号的意义可以查看CSS属性值定义语法。

border-image实例

background:blue;
background-clip: padding-box;
border: 20px dotted green;
border-image:url(https://mdn.mozillademos.org/files/13060/border-image.png) 40 / 10px / 20px round;
/*其中border-image属性可以用以下一组属性代替*/
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;

盒子阴影

在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下：

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

inset：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。 设置水平偏移量，如果是负值则阴影位于元素左边。设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 或 则有模糊效果。
：这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
：这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
：如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
设置多个阴影时，使用逗号将每个阴影的值隔开。前面的阴影会在后面阴影之上，如果上层有透明度较低的部分，会与下层的颜色重叠，合成新颜色。

border-shadow实例

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 多个阴影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;

/*全局关键字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;