【无标题】

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）

从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

从上到下的线性渐变：

#grad { background-image: linear-gradient(#e66465, #9198e5); }

线性渐变 - 从左到右

从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

从左到右的线性渐变：

#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

从左上角到右下角的线性渐变：

#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }

盒子边款阴影

语法：box-shadow： px   px  px  px  color;

.box2{
    width: 420px;
    height: 620px;
    background-color: white;
    border-radius: 10px;
    margin-top: -600px;
    margin-left: 870px;
    overflow: hidden;
    box-shadow: 2px 2px 10px 2px gray;
}

CSS3 background-image属性

1、

#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }

2、 

#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

背景属性：

• background-image
• background-size
• background-origin
• background-clip