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 长度单位 ...
随机推荐
- LightOJ1422 Halloween Costumes(区间DP)
题目大概是依次有n场派对,每场派对都有需要穿某套衣服去参加,可以同时穿多套衣服,就是一套套着一套,如果脱了的话就不能再穿上那套了,问最少需要几套衣服去参加完所有派对. 区间DP: dp[i][j]第i ...
- BZOJ3619 : [Zjoi2014]璀灿光华
终于把省选时的遗憾补上了… 对于构造立方体: 首先BFS构出底层,然后再逐层构造立方体 对于计算: $O(n^6)$爆搜即可. #include<cstdio> #include<c ...
- input:focus
input:focus,select:focus,textarea:focus{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2p ...
- winform学习2-datagridview数据绑定
1.datagridview.clearSelection()清除默认的选中项 2.列数据显示,首先列必须是显示状态, 3.布局-单元格内文字内容居中显示,示例:外观-defaultCellStyle ...
- 【转】Android APK的数字签名的作用和意义
1. 什么是数字签名? 数字签名就是为你的程序打上一种标记,来作为你自己的标识,当别人看到签名的时候会知道它是与你相关的 2. 为什么要数字签名? 最简单直接的回答: 系统要求的. Andr ...
- placeholder在不同浏览器下的表现及兼容方法
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- Java主要有那几种文件类型,各自作用
java提供了两类数据类型:基本类型,引用类型. 1.基本类型包括:boolean ,byte,char,int,short,float,long,double,值得注意的是:在原始数据类型中,除了b ...
- swift -- 学习记录
先把疯狂的swift这本书大致看了一遍 2016.7.13 因为实在是太闲,所以决定把公司的应用用swift写一遍 然后顺便看看swift的官方文档 这里有一个官文的中文翻译,感动啊 http://w ...
- ubuntu 14.04安装
最近想搞spark.没有集群环境,想先在单机上跑.但是两年前一直用到现在的virtualbox已经太老,很多源都停更了.所以准备装ubuntu14.04. 0. 更新源.163的源有问题,用的是soh ...
- OC学习笔记——类别(Category)
类别,有些程序员又称之为分类. 类别是一种为现有的类添加新方法的方式,尤其是为系统的做扩展的时候,不用继承系统类,可以直接为类添加新的方法.也可以覆盖系统类的方法. 如: @interface NSO ...