HTML和CSS入门（5）

CSS3边框

1.盒子阴影：box-shadow：h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离) spread(模糊半径) color(颜色) inset(内阴影)
其中水平偏移的值是正右负左，垂直偏移的值是正下负上。写这个属性的时候要注意浏览器的兼容性，所以要写带多个前缀的box-shadow属性。前缀有：-webkit，-ms，-o，-moz。
优雅降级：先写总的后写各个类合。
渐进增强：先写各个类合后写总。

2.文字阴影：text-shadow：h-shadow v-shadow blur color

3.图片边框：border-image：source（路径） slice（边径向内的距离） width outset repeat
要注意的是，如果想要显示出图片边框的样式，首先要定义border：solid xpx ;这样图片边框的样式才能显示出来。

4.注册表样式：

<fieldset>    <legend>excel</legend>    <p></p></fieldset>

5.圆角：radius：a 四角相同
radius：a b 左上和右下 右上和左下
radius：a b c 左上 右上和左下 右下
radius：a b c d 左上 右上 右下 左下

6.多背景：background：url( )，url( ),url( );
background-size:cover;(以最大程度放大，图片不一定完整)
contain；（放大到合适状态，图片完整）
100% 100%；（长宽填充，图片可能会变形）
50px 50px；（精确像素）
background-clip：content-box（在内容框内）
padding-box（在填充区域内）
border-box（默认值）
background-attachment：local（以父元素的滚动而滚动）
scroll（以页面的滚动条的滚动而滚动）
fixed（不动，固定）
7.渐变
（1）线性渐变：background：liner-gradient（direction方向，c1，c2…）
（2）径向渐变：background：radial-gradient（center，shape size，c1，c2…）
size:closest-side最近的边
farthest-side最远的边
closest-corner最近的角
farthest-corner最远的角

8.文本溢出

text-overflow: ellipsis;/*clip*/    white-space:nowrap;    overflow:hidden;

9.文本换行：word-break：break-all（单词内换行）

10.字体

@font-face {    font-family: newfont;/*自定义字体名字*/    src：url（）}

引用时：

p{    font:25px newfont;}

11.多列：column-count：n；（n=1，2，3…）
column-gap：npx；（间隔）
column-rule：solid npx black；（分割线）
column：宽度 列数；

12.用户界面：resize：none；禁掉文本框可拖拽的属性
resize：both；使div可缩放大小
horrzontal；水平放大缩小
vertical；垂直变化

13.图片：（响应式）

img{    max-width: 100%;/*max-width=100%放大到原图大小后不再变化；width=100%放大到原图大小后继续放大*/    height:auto;}