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 长度单位 ...
随机推荐
- 模拟 POJ 1068 Parencodings
题目地址:http://poj.org/problem?id=1068 /* 题意:给出每个右括号前的左括号总数(P序列),输出每对括号里的(包括自身)右括号总数(W序列) 模拟题:无算法,s数组把左 ...
- netstat -an 提示:不是内部或外部命令
输入cmd,点击确定按钮: 进入dos操作界面效果: 然后输入netstat -an 然后回车,查看端口: 5 如果输入:netstat -an,提示:不是内部或外部命令,也不是可运行的程 ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- The Storage Situation: Removable Storage
http://commonsware.com/blog/2014/04/09/storage-situation-removable-storage.html There is a lot of co ...
- ASP.NET C# 日期 时间 年 月 日 时 分 秒 格式及转换(转自happymagic的专栏)
在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...
- Css - Table.css
基本的Table样式 .gridtable { border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; ...
- Canvas - 气泡
Main.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...
- 修改ssh服务端口
第一种: 01假如要改Linux SSH的默认端口(22),那么你只要修改:/etc/ssh/sshd_config中Port 22,这里把22改成自己要设的端口就行了,不过千万别设和现已有的端口相同 ...
- NBOJv2 Problem 1009 蛤玮的魔法(二分)
Problem 1009: 蛤玮的魔法 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %ll ...
- MSF命令 收集
一.msfconsole ? 帮助菜单 back 从当前环境返回 banner 显示一个MSF banner cd 切换目录 color 颜色转换 connect 连接一个主机 e ...