HTML5和CSS3基础综合版

CSS3边框

1. border-radius:值；圆角，可以有四个值，顺序依次是左上，右上，右下，左下。
2. box-shadow:h-shadow v-shadow blur spread color inset;盒子阴影，其值分别为水平偏移 垂直偏移 模糊距离 模糊大小 颜色 内/外阴影
   （此处差一个文本阴影：text-shadow:h-shadow v-shadow blur color;）
3. border-image:source slice width repeat/stretch/round;图片边框线

fieldset

怎样做出下图的效果？

主要代码如下：

<form action="">
    <fieldset>
        <legend>在线调查</legend>
        <p><input type="text"/></p>
        <p><input type="text"/></p>
        <p><input type="text"/></p>
    </fieldset>
</form>

background

1.同时放多张背景图片:

background:url("img/bi.png") no-repeat 970px bottom,
         url("img/denglou.png") no-repeat left top,
         url("img/xinnian.png") no-repeat 230px 70px,
         url("img/bg.jpg") repeat-x;
background-size: 35px 250px,
                 198px 158px,
                 80px 150px,
                 1024px 630px;

效果图如下：

2.background-origin:border-box/padding-box/content-box;从边框区域/填充区域/内容区域开始
3.background-clip:border-box/padding-box/content-box;从边框区域/填充区域/内容区域开始绘制背景
4.background-attachment:scroll/local/fixed;随页面滚动条滚动/随着对象滚动/固定

渐变

1.线性渐变

background:linear-gradient(to right top,red,yellow,green);
background:-webkit-linear-gradient(left bottom,red,yellow,green);
background: -moz-linear-gradient(right top,red,yellow,green);
background: -o-linear-gradient(right top,red,yellow,green);

2.径向渐变

background: -webkit-radial-gradient(red,yellow,green);
background: -moz-radial-gradient(red,yellow,green);
background: -o-radial-gradient(red,yellow,green);
background: radial-gradient(red,yellow,green);

多列

column-count:3;*分3列*
column-gap:30px;*列间距*
column-rule:solid 1px black;*间隔线*
column-width: 100px;*列宽*
columns:100px 3;*综合写法：column-width column-count*

溢出

text-overflow:clip/ellipsis;
white-space: nowrap;*禁止换行*
overflow: hidden;