一、CSS设置颜色与透明度
- 1.颜色透明度的设置，可以通过引入RGBA模式和
opacity属性对背景与图片设置不透明度
1，RGBA模式
rgba(r,g,b,alpha);
div{
width: 300px;
height: 300px;
background: rgb(242,35,36) url("user.jpg") no-repeat;
rgba(242,35,36,0.7)
/*设置颜色透明度为0.7*/
}2，opacity模式
opacity:0.00~1;是CSS3引入的新属性，用于定义标签的不透明度的值，他是一个介于0~1之间的浮点数值，其中0表示透明，1表示完全不透明
3,rgba模式和opacity的区别
- opacity能作用于任何元素的透明度，作用范围比rgba大。
- rgba只能作用于背景颜色上。
二、图片边框设置
- 图片边框和边框的设置方法类似，但图片边框的属性名以及属性值如下
属性 | 含义 |
border-image-source | 指定图片的路径，url设置路径 |
border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量（分割线）使用百分比数值 |
border-image-width | 指定边框宽度像素 |
border-image-outset | 指定边框背景向盒子外部延伸的距离，设置边框图像与边框的距离，取值为数字，表示倍率 |
border-image-repeat | 指定背景图片的平铺方式。stretch拉伸，repeat平铺，round（自适应平铺） |
1. 图像边框实际用法
<style>
div{
width: 300px;/*盒子宽度*/
height: 300px;/*盒子高度*/
border:1px #666 solid;/*盒子边框*/
border-image-source: url("user.jpg");/*导入图片*/
border-image-slice:33%;/*图片按33%均分割*/
border-image-width: 30px;/*图片边框的宽度*/
border-image-outset: 1;/*图片边框与盒子边框的倍率*/
border-image-repeat: round;
/*背景图片的平铺方式为自适应*/
}
</style>2. 利用综合属性设置图片边框属性
图标边框的图片素材的四个角的位置如果没有设置其它属性，则和盒子边框的四个角是吻合的，素材图片的中间位置一般会被舍弃掉。
效果：
三、设置网页元素阴影效果
在网页制作中，可以利用css3中的box_shadow属性对盒子模型设置应用
box-shadow：h-shadow(阴影的水平值) v-shadow(垂直阴影属性) blur(阴影模糊值px) spread(阴影面积大小) color(阴影颜色) outset(默认值，设置外阴影);inset(设置内阴影)；
如
<style>
img{
width: 200px;
box-shadow: 10px 19px 5px 10px #999 inset;
border-radius: 50%;
padding: 10px
}
</style>注意：设置内阴影的时候需要先设置内边距,多重阴影添加，用,逗号将两个阴影属性值分隔
img{
width: 200px;
box-shadow: 10px 19px 5px 10px #999,1px -6px 5px 10px red;
border-radius: 50%;
padding: 10px/*设置内边距*/
}效果：
四、渐变效果的设置
1. 线性渐变
在渐变过程中，起始颜色沿着一条直线过度到结束颜色，设置方法：background-image:linear-gradient(渐变角度，颜色值1（开始颜色），颜色值2…颜色值n（结束颜色）);
渐变角度 | 颜色值 |
渐变角度值水平线和渐变线之间的夹角，可以是 | 颜色值用于设置渐变颜色，其中颜色值1表示其实颜色，颜色值n表示结束颜色，颜色与颜色用 |
示例
<style>
div{
width: 300px;
height: 300px;
background-image: linear-gradient(to top, #FFF 50%,#000 80%);
/* to top 到顶部, 开始颜色，渐变位置50%，结束颜色*/
}
</style>2.径向渐变
径向渐变过程当中其实颜色会从一个中心点开始按椭圆或圆形的形状进行扩张渐变：background-image:radial-gradient(参数值);
渐变形状 | 圆心位置 | 颜色值 |
渐变形状用来定义径向渐变的形状，取值可以是垂直半径的像素值或者百分比，也可以是相对应的关键字 | 圆心位置用于确定元素渐变的中心位置，使用 | 颜色值1便是其实颜色，颜色值n表示结束颜色（同上） |
关键字
渐变形状：circle圆形、ellipse椭圆形
圆心位置：left、center、ight、top、bottom
示例
.boxone{
width: 400px;
height: 400px;
background-image: radial-gradient(50px 90px at center, red 20%,#000 50%,blue);
/*渐变形状(像素或者关键字) 圆心位置 开始颜色，结束颜色*/
}3.重复渐变(repeating)
重复线性渐变：background-image:repeating-linear-gradient(参数值);
.boxone{
width: 400px;
height: 400px;
background-image: repeating-radial-gradient(50px 90px at center, red 20%,#000 50%,blue);
/*重复径向渐变/渐变形状(像素或者关键字) /圆心位置 /开始颜色/结束颜色*/
}效果：
