臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > CSS > css3基础-边框-渐变

css3基础-边框-渐变

所属分类: CSS   2019-12-27 16:55:48  编辑:admin  浏览次数 39 次

圆角

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%);

}


Web文章检索

Web文章目录