css3

border-color    border-image  border-radius

border-image和border-radius类似,四角铺盖图片 注意把border:width color style;放在border-image前面其中border-image:url() number;

width决定图片的相对大小 number决定图片的宽度



background-origin:border | padding | content

border:从border区域开始显示背景。

padding:从padding区域开始显示背景。

content:从content区域开始显示背景。

background-clip:border-box | padding-box | content-box | no-clip

border-box:从border区域向外裁剪背景。

padding-box:从padding区域向外裁剪背景。

content-box:从content区域向外裁剪背景。

no-clip:从border区域向外裁剪背景。

background-size:width height 

设置背景图片的大小。


color

hsl(色调 饱和度 亮度)

Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;

Saturation(饱和度)。 取值为0%到100%之间的值;

Lightness(亮度)。 取值为0%到100%之间的值;

opacity 透明度

由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。列如opacity{opacity:0.6;}

rgb(r g b a)

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数 | 百分数

A:透明度。取值0~1之间

例如:aaa{background-color:rgba(0,120,60,0.4);}


text-shadow (length color opacity)文本阴影

color:指定颜色。

length:由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

opacity:由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。

text-overflow :clip| ellipsis

clip:不显示省略标记(...),而是简单的裁切。

ellipsis:当对象内文本溢出时显示省略标记(...)


和overflow:hidden一起用

word-wrap:break-word;

break-word:内容将在边界内换行。如果需要,词内换行(word-break)也会发生。


和overflow:hidden一起用


box-shadow

box-shadow实现曲线纸张

box-shadow实现浏览器兼容

box-sizing:content-box|border-box|inherit

content-box:此值维持css2.1盒模型的组成模式,border|padding|content {element width=border+padding+content}

border-box:此值改变css2.1盒模型组成模式,content|border|padding {element width=content}

改变容器的盒模型组成方式。

box-size详解


transition:transition-property||  transition-duration ||transition-timing-function|| transition-delay

"transition"缩写属性联合了transition-propertytransition-durationtransition-timing-functiontransition-delay这四个单一的属性。需要注意的是,这些属性的顺序很重要,第一个数值将作为变换时间长短(transition-duration)来处理,第二个会作为变换执行延迟(transition-delay)的时间。另外一个建议是当接收含字体缩写的时候,同种类型的值间使用字符"/"。例如2s/4s表示2秒钟的持续时间以及4秒钟的延时。

transition-property:

transition-duration:执行时间

transition-timing-function:此时间函数使用的是贝塞尔曲线

transition-delay:执行延迟

实现照片墙效果


@media 改变窗口样式改变


columns:宽度||栏目数

-webkit-columns:90px 3;


@font-face:{属性: 取值;}

@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

font-family:设置文本的字体名称。

font-style:设置文本样式。

font-variant:设置文本是否大小写。

font-weight:设置文本的粗细。

font-stretch:设置文本是否横向的拉伸变形。

font-size:设置文本字体大小。

src:设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。

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

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,633评论 0 7
  • 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。· elemen...
    lovelydong阅读 479评论 0 2
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    程序员poetry阅读 9,071评论 22 225
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 643评论 0 0
  • 1、 路还很长,狼王不是一夜之间就变成首领的。 同样,没有历练,人也不会懂得如何去爱。 关注了情感博主半仙幺幺,去...
    烙子阅读 461评论 2 7