css3基础-边框-渐变
2019-12-27 16:55:48 来源：admin 点击：702
圆角
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%);
}