圆角

border-radius:25px;

盒阴影

<style>

div

{

         width:300px;

         height:100px;

         background-color:yellow;

         box-shadow: 10px 10px 5px #888888;

}              

</style>

边界图片

<style>

div

{

         border:15px solid transparent;

         width:250px;

         padding:10px 20px;

}

#round

{

         -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

         -o-border-image:url(border.png) 30 30 round; /* Opera */

         border-image:url(border.png) 30 30 round;

}

#stretch

{

         -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */

         -o-border-image:url(border.png) 30 30 stretch; /* Opera */

         border-image:url(border.png) 30 30 stretch;

}

</style>

圆角

·         四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

·         三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

·         两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

·         一个值： 四个圆角值相同

 border-radius: 50%   椭圆

渐变

从上到下的线性渐变：

#grad {

    background-image: linear-gradient(red, yellow);

}

从左到右的线性渐变：

#grad {

  height: 200px;

  background-image: linear-gradient(to right, red , yellow);

}

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

#grad {

  height: 200px;

  background-image: linear-gradient(to bottom right, red, yellow);

}

带有指定的角度的线性渐变：

#grad {

  background-image: linear-gradient(-90deg, red, yellow);

}

从左到右的线性渐变，带有透明度：

#grad {

  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

}

一个重复的线性渐变：

#grad {

  /* 标准的语法 */

  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

}

颜色结点均匀分布的径向渐变：

#grad {

  background-image: radial-gradient(red, yellow, green);

}

颜色结点不均匀分布的径向渐变：

#grad {

  background-image: radial-gradient(red 5%, yellow 15%, green 60%);

}

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

实例

形状为圆形的径向渐变：

#grad {

  background-image: radial-gradient(circle, red, yellow, green);

}

带有不同尺寸大小关键字的径向渐变：

#grad1 {

  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

}

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。

可以取值top right等

一个重复的径向渐变：

#grad {

  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

}