CSS3新添加的属性
1.圆角设置
border-radius:15px 50px 30px 5px; /*四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下 角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角 一个值: 四个圆角值相同 */ 2.阴影设置
box-shadow:100px 100px 80px #888888;/*四个参数依次:距左距离 距上距离 模糊程度(数值越大越模糊) 颜色 (text-shadow为文本阴影)*/
3.多背景设置
background-image:url(xxx.gif),url(xxxxx.gif);/*支持多背景混合插入*/
4.渐变设置(IE9以上)
过度渐变:
background: -webkit-linear-gradient(red, blue, green);
background: -o-linear-gradient(red, blue, green);
background: -moz-linear-gradient(red, blue, green);
background: linear-gradient(red, blue, green); /* 标准的语法(必须放在最后) 参数个数不限可多节点变色 默认为从上到下渐变*/ background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(left,red, blue);
background: -moz-linear-gradient(left,red, blue);
background: linear-gradient(left,red, blue); /*left也可以写成(10deg以角度方式渐变) 从左到右渐变*/ background: -webkit-linear-gradient(left top, red, blue);
background: -o-linear-gradient(left top,red, blue);
background: -moz-linear-gradient(left top,red, blue);
background: linear-gradient(left top,red, blue); /*从左上到右下渐变*/ 径向渐变:
background: -webkit-radial-gradient(red, green, blue,yellow);
background: -o-radial-gradient(red, green, blue,yellow);
background: -moz-radial-gradient(red, green, blue,yellow);
background: radial-gradient(red, green, blue,yellow);
CSS3新添加的属性的更多相关文章
- 针对vue中请求数据对象新添加的属性不能响应式的解决方法
1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...
- CSS3新添加的选择器
---条件选择器:--- .ccc[cusid*= value] { backgroud-color:#0094ff; } //表示使用了class="ccc"元素自定义属性cus ...
- 自定义视图一:扩展现有的视图,添加新的XML属性
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! 简介 这个系列详细的介绍了如何穿件Android自定义视图.主要涉及的内容有如何绘制内容,layout和measure的原理,如何继承 ...
- Android自定义视图一:扩展现有的视图,添加新的XML属性
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...
- 总结CSS3新特性(Transform篇)
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...
- 03-移动端开发教程-CSS3新特性(下)
1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用,但是它有几个很大的局限. transition需要事件触发,所以没法在网页加载时自动发生. transition是一次性 ...
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
- css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
随机推荐
- http://www.roncoo.com/article/detail/124822
http://www.roncoo.com/article/detail/124822
- LIS(nlogn) POJ 3903 Stock Exchange
题目传送门 题意:LIS最长递增子序列 O(nlogn) 分析:设当前最长递增子序列为len,考虑元素a[i]; 若d[len]<a[i],则len++,并使d[len]=a[i]; 否则,在d ...
- DP URAL 1244 Gentlemen
题目传送门 /* 题意:已知丢失若干卡片后剩余的总体积,并知道原来所有卡片的各自的体积,问丢失的卡片的id DP递推:首先从丢失的卡片的总体积考虑,dp[i] 代表体积为i的方案数,从dp[0] = ...
- 海贼王之——梦想音乐
相信和很多海粉一样,对伙伴的关照和战斗,是相当地震撼. 好东西时不时地听一下,然后感受那种刷新全身表层细胞,触电...: 音乐链接: http://v.youku.com/v_show/i ...
- vnc使用
使用rpm –qa vnc命令如果收到如下信息说明已经安装了vncserver, [root@localhost: ~]#rpm -qa |grep vnc gtk-vnc-python--.el5 ...
- Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...
- BestCoder Round #78 (div.2)
因为rating不够QAQ就报了Div2.. [CA Loves Stick] CA喜欢玩木棍. 有一天他获得了四根木棍,他想知道用这些木棍能不能拼成一个四边形. Sample Input 2 1 1 ...
- windows 中配置 nodejs npm
npm安装模块的方式有两种:本地安装,全局安装. 这两者的区别在于,在用npm install xxx时加不加-g这个选项. 本地安装的路径在win中是当前cmd的路径.比如,我一打开cmd时,路径是 ...
- java截取图片部分尺寸
package util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; i ...
- 图解classloader加载class的流程及自定义ClassLoader
图解classloader加载class的流程及自定义ClassLoader 博客分类: JVM JavaJVM虚拟机EXTSUN /** * 转载请注明作者longdick http://l ...