css3的Background新属性

前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚.就google了一篇,发现不错,翻译下来吧. 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, C…

css3的一些新属性及部分用法

CSS3是CSS(层叠样式表)技术的升级版本,增加了很多新属性,我们在web开发中采用css3技术可以提高程序的性能以及用户体验.而且一般面试中会问到知道哪些新增加的属性,我们不可能将所有东西一一复述给面试官,需要自己有一个清晰的思路,可以选择自己使用过的一些新属性来阐述. 在W3school上css3被划分为模块,其中最重要的CSS3模块包括: 选择器框模型背景及边框.文本效果 2D/3D转换动画多列布局用户界面下面按着自己比较了解的往下写. 一.边框特性 CSS3对网页中的边框进…

css3几个新属性

1.text-shadow 文字阴影 p{ text-shadow:2px 2px 10px #000; } 四个参数,依次: a:水平偏移 b:垂直偏移 c:阴影程度 d:阴影颜色 2.word-break:break-all 解释:允许单词换行,是紧接前面内容 3.word-wrap:break-word 解释:允许单词换行,是先把单词换一行 4.white-space:nowrap 解释:强制文本不换行 5.text-overflow:ellipsis 解释:显示省略符号来代表被修剪的文…

css3之背景新属性

background属性属性描述 background-origin 背景图片的定位区域 background-size 背景图片尺寸 background-image:url(),url();允许多个背景图片…

css3的一些新属性1

<body> /*文本阴影*/ <h1 style="text-shaow:5px 5px 5px #C0F">我爱你</h1> </body> 1. 效果如图: 2.word-wrap: break-word允许文本强制换行 <head> <style> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; } </styl…

css3之边框新属性

border属性属性描述 border-image 图片边框 border-radius 圆角 box-shadow 矩形阴影…

CSS3中哪些新属性—阴影、文本省略（1）

CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. 文字阴影: text-shadow:x,y,z,color; -x偏移量,x轴为文字左边 -y偏移量,y轴为文字顶部 -z:阴影模糊半径 -color:阴影颜色理解x和y的含义,颜色可以叠加的,里面有代码!!!! 注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要…

css3之文本新属性

…

CSS3学习之 animation 属性

发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari 和 Chrome 支持替代的 -webkit-animation 属性. 定义和用法 animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function animation-del…

使用css3新属性clip-path制作小图标

一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载的资源是有限的,例如IE7是2个,IE8是6个,chrome是6个,火狐是8个.如果网页上面有很多张零碎的小图片,导致请求的次数太多,等待加载状态中的资源会很多,明显影响性能.因此,一个改进的办法是使用sprites图,将多张小图放在一张大图,然后限定展示区域的大小,同时改变图片的显示位置backg…

两点补充——CSS3新属性以及弹性布局

CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩…

CSS3中background属性的调整

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下: background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-i…

CSS3新属性注释及实例

这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } border-shadow 用于向方框添加阴影 div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #8…

css3新属性position: sticky 一分钟实现导航栏悬停功能

css3新属性position: sticky 一分钟实现导航栏悬停功能前言正文前言想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn: 那么你们都是使用什么方法实现的呢?今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定. 正文你只需要找到你导航栏的标签,给他添加以下样式,就可以实现导航栏悬停功能: 标签内容 <div class="top"&…

css3新属性@ text-shadow

text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移量) stroke(阴影的线条宽度) color(阴影颜色); 2效果演示: 1)text-shadow: 0 0 10px red:字体周围更亮,感觉像发亮的字体,效果不太明显 2)color: #000;text-shadow: 0 1px 1px #fff;用阴影来突出字体颜色,有刺青的感觉…

css3.0新属性效果在ie下的解决方案(兼容性)

css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!我们收集整理了一些css3.0新属性效果在ie下的解决方案! .box_round {-moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+,…

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas…

自己用过的一些比较有用的css3新属性

css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不是专门在做前端的,只是有时不得不自己去写这些东西,有时喜欢研究研究这些,所有以上只是我的个人看法. 1.在之前我想在页面做出一个边框为圆角框,貌似需要写挺多css代码的(可能我没了解到更好的办法),在css3里有一个属性创建圆角是非常容易的 ,设置好角度也可以创建一个圆 border-radius:…

CSS背景和CSS3背景background属性

css背景属性用于定义HTML元素的背景背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置背景有很多属性可以利用.将在下文中详细解释这些属性的用法. css属性定义背景效果 background 简写属性,将背景属性设置在一个声明中 background-color 背景颜色 background-image 背景图片 background-position 背景图像定位,设…

Css3新属性：calc()

一.前言 calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在不同尺寸屏幕下.项目中常常碰到要始终居中的元素,当然想到的第一个就是使用margin:0 auto:或者使用定位和margin结合的这种简单的方法,当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西. 二.使用方法 calc()中的参数是一个计算公式,通过这个计算公式把计…

background复合属性详解（上）：background-image

background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本的情况是指定一张图片的url作为背景: <style> .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(h…

CSS3中的新特性

一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o…