background 和渐变 总结

一,background-position:(图片定位)
三种写法:
1):按%比,左上角最小(0%,0%),右下角最大(100%,%100);
2):(x,y)左上角最小(0,0),右下角最大(max,max);
3)top,center,left,right,bottom;
二,background-clip:
1,包含那一部分的值:border;padding;content;
三,background-origin:
1,从那一部分值开始:border;padding;con tent;
四,背景图像是否固定或者随着页面的其余部分滚动。
1,scroll:随着页面的其余部分滚动
2,fixed :固定在窗口的某个位置。
五,渐变:
1,线性渐变:linear-gradient:
1)如果是角度:角度,过渡色;
2)如果是top。。。,方向前加to,后过渡色;
2,迳向渐变:radial-gradient:
1)默认是中心点渐变;
2)[size at left top]:其中size是渐变半径。
3,重复渐变:
1)重复线性渐变:repeating-linear-gradient:格式跟线性渐变一样。
2)重复迳向渐变:reoeating-radial-gradient:格式跟迳向渐变一样。

蜗牛又在忙爬树,但他总是没有恒心,每当爬到象剑兰那么高的时候他就会停下来兴奋的和她说话,

然后不知不觉的往下滑,

等他滑到底一天也就过去了,第二天他又会爬上来,剑兰总是扬着高傲的头说他很烦。

但每天早上起来她还是扬着头等蜗牛来和她说话。当松鼠迅捷的从他头上跃过去时,

蜗牛吓的一闭眼,然后叹道:“哦,什么时候我能练到象松鼠一样一天在大青树上爬二十个来回呢?那样我一天就可以和剑兰姐姐聊二十次了。”

时间: 2024-11-01 16:54:19

background 和渐变 总结的相关文章

background 线性渐变

原文链接:http://caibaojian.com/css3-background-gradient.html 综上所述,线性渐变的兼容写法如下:· //code from http://caibaojian.com/css3-background-gradient.html .gradient{ background: #000000; background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以

【前端】背景缩放和渐变

背景缩放 Background-size background: 可放/*颜色 图片 平铺 位置 滚动*/; border: 1px solid red; /*background-size: w h 规定背景图像的尺寸;*/ /*background-size: 100px 100px;*/ /*background-size: 100px; 如果只有一个值 后面一个值默认为 auto 等比例缩放*/ /*background-size: cover; 图片部分可能不完整,超出部分会被切掉 *

CSS——背景渐变

在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很严重,我们这里之讲解线性渐变 语法格式:  background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色):  background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色位置....): 原文地址:htt

邮箱注册界面_表单练习

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style type="text/

css3中关于伪类的使用

目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时,经常会遇到在每一个li后面添加一个分割符号,到最后一个元素的时候,分割符就会去掉的一种效果. 如图 那么制作这样的一个效果,怎么用纯css很简单的完成了.这里用到了css的伪类. html部分 <body> <ul class="nav"> <li><a href="">Home</a></

HTML5和css3的总结

简单的罗列一个HTML5的新东西,以后的几天里详细的过一遍一个挺有用的网站:www.css88.com [H5的新标签] 用之前的标签完全可以代替的:header footer aside atrical nav address time mark section 新增的重要的标签:video audio caves(画图) 这些新标签的作用:语义化,使代码的可读性更强:便于提高搜索优化. 再谈谈兼容性:兼容IE9+,IE8及其以下有些可以解决,但大部分的还是放弃.这里有两个词我觉得挺好,简单写

html+css实现windows桌面

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <

css3 border-image及连续的图像边框

border-image 它是下面几个值的简写: border-image-source // 使用绝对或相对地址url,引入图片 border-image-slice   //切割图片,取值支持:<number> 或<percentage>其中number是没有单位的, border-image-width //边框图片的宽度 border-image-outset //边框向外延伸的距离 border-image-repeat //边框如何重复取值有: stretch | re