CSS3中的background、shadow、reflect、mask

CSS3中新增添了很多功能,这些功能大大的增添了css的效果,下面来总结下CSS3中的background、shadow、reflect、mask。

background:
CSS的background可以设置如下属性:

background-color
背景颜色;

值可以为英文(eg:pink),十六进制(eg:#ccc)或rgb(0255,0255,0~255)。

注:rgba(0255,0255,0255,01); 最后一个参数为透明度

background-position
背景图像的位置;

默认值是0% 0%;

值可以为left、top、right、bottom、center,也可以是百分比(eg:50%),也可以是具体值(eg:20px 50px)。

注:当为百分比或具体值时必须按照x y的顺序写;

background-repeat
背景图片是否重复;

默认值是repeate;

值可以是repeat、repeat-x、repeat-y、no-repeat、inherit;

background-origin
该属性规定background-position相对于什么来固定背景;

默认值:padding-box;

值可以是border-box(相对于边框盒)、padding-box(相对于内边距)、content-box相当于内容框。

background-size
背景的尺寸;

默认值:auto;

值可以为百分比,具体值(width、height)、contain(以最小为主)、cover(以最大为主)。

background-image
背景图片;

值可以为url()、none、inherit。

background-attachment

如何设置固定的背景图片;

默认值:scroll;

值可以为scroll(背景图会随着页面其余部分滚动)、fixed(固定在页面中)、inherit、

background-clip
规定背景的绘制区域;

默认值:border-box;

值可以为border-box、padding-box、content-box。

background的渐变效果
渐变效果中,又可以分为线性渐变、镜像渐变和重复渐变。

线性渐变:


background:linear-gradient(red,blue);

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个:

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变);

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角);

第四个和第五个参数,分别是两个color-stop函数,color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色;

只有color时不需要处理兼容;

当有其他参数时需要加上处理兼容问题的前缀:-webkit;

径向渐变:

background: -webkit-radial-gradient(50% 0,circle,deeppink,aqua,yellow);

必须加上处理兼容的前缀:-webkit;

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个:

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变);

径向渐变中还可以规定渐变的形状:circle(圆)、ellipse(椭圆);

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角);

第四个和第五个参数,分别是两个color-stop函数,color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色;

重复渐变:

background:-webkit-repeating-linear-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

background:-webkit-repeating-radial-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

shadow:
阴影可以设置文字阴影和块阴影。

文字阴影:
text-shadow

p{

font-size: 40px;

text-shadow: 10px 10px 40px #0000FF;

color:#000;

-webkit-text-stroke: 1px  #FFC0CB;

}

text-shadow:x y 模糊度 color;

其中:-webkit-text-stroke:描边宽度 描边颜色;表示文字描边。

块阴影:
box-shadow

.div1{

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

box-shadow: 10px 10px 50px #FF1493,10px 15px 50px #FFFF00;

text-shadow:5px 6px 20px #666;

}

box-shadow:x y 模糊度 color;

还可以有多个值:box-shadow:x y 模糊度 color,x y 模糊度 color,x y 模糊度 color;

还可以规定阴影方向:

box-shadow:x y 模糊度 清晰度 color inset;

-webkit-box-reflect:
倒影

-webkit-box-reflect:above 0px -webkit-linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,1));

below 向下

above 向下

left 向左

right 向右

10px 间距

-webkit-mask:
朦版

-webkit-mask:url() no-repeat;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,674评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,272评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,497评论 0 7
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 1,962评论 0 2
  • 传送门:http://www.cocoachina.com/ios/20140916/9632.html
    永远都能阅读 113评论 0 1