百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

今天学到的比较重要的新知识

作者代江汁课程第三天:让简历有点色彩1229次浏览12019-05-23 22:23

background可以设置渐变色
1.线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
如果不设置方向默认是从上到下(为什么要四行,因为要考虑不同浏览器,一般默认的写到最后)

{
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

如果设置方向

{
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

这里是从左到右
还可以设置从角落到角落

{
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

这是左上到右下
还可以把方向设置成角度,0deg=to top,90deg=to right,180deg=to bottom,270deg=to left
颜色可以用rgba色(red,green,blue,transparent)前三个值可以设置0-255,最后一个值可以设置0-1表示透明度
重复线性渐变

{
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);/* Safari 5.1 - 6.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);  /* Opera 11.1 - 12.0 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);/* Firefox 3.6 - 15 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */
}

这里各个值的作用还在研究,知道的同学欢迎评论指点。
2.径向渐变(Radial Gradients)- 由它们的中心定义

 {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
}

上面这个是从里到外的渐变
每个颜色值的后面可以设置百分比,如果三个百分比加起来不够100%,那剩下的地方全是最后一个颜色。
默认渐变是长轴横向的椭圆形
如果要设置成正圆形,如下:

{
    background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

也可以设置重复渐变,类似线性渐变。
text-indent属性设置之后无效
因为这个属性只在块元素中生效,所以在<span> <a> <text>等元素中设置需要在它们的css中再添加一个display:block属性就可以啦。

0条评论