css3的学习笔记1
一. 边框
1. border-color
border-color是设置边框的颜色。包括border-top-color,border-left-color,border-right-color,border-bottom。但是这里有一个border-XXX-colors样式,可以为边框设置多个颜色。其中如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。但是这种样式目前只能用在ff中,因此因此需要-moz-。而且不能使用-moz-border-colors同时为四个方向的边框设置多个颜色,只能逐个进行设置。如下:
div{
width: 100px;
height: 100px;
margin: 50px 0 0 50px;
background: red;
border-style:solid;
border-width:5px;
-moz-border-top-colors: #333 #555 #777 #999 #ddd;
-moz-border-bottom-colors: #333 #555 #777 #999 #ddd;
-moz-border-right-colors: #333 #555 #777 #999 #ddd;
-moz-border-left-colors: #333 #555 #777 #999 #ddd;
}
效果如下:
2. border-image
对于border-image这个属性用来给边框添加背景图像。是border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat的简写。
语法:border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}(看不懂,略)
相关属性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image
border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image。
兼容性:Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6
border-images-source:图片地址。例如:url(png.png)。如果为none,则表示不设置边框图像,将会设置border-style的值。
border-image-slice:图片切片。用来指定边框图像顶部、右侧、底部、左侧内偏移量。可以设置为数字或百分比。作用是把边框图像切成9个区域:4个角、4边区域和一个中间部位,若不设置fill,则中间部位将为透明。例如:border-image-slice: 27 27 27 27,表示边框偏移27,其原理图如下
border-image-width:设置边框图片的宽度。例如border-image-width:27 27 27 27;
border-image-repeat: 设置图片是否重复,包括重复(repeated)、铺满(rounded)或拉伸(stretched。例如border-image-repeat:repeat.
二. background
1. background-size
作用:设置背景图片的大小。
取值:<length> | <percentage> | auto ]{1,2} | cover | contain
例如:background-size: 100% 100%即可将背景扩展为容器的大小。
2. Multiple backgrounds
作用:多重背景图象,可以把不同背景图象只放到一个块元素里。
取值:[background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]
兼容性:webkit.
例如:background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;
三. color
1. hsl
作用:通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色,HSL即是代表色调,饱和度,亮度三个通道的颜色。
取值:<length> || <percentage> || <percentage>
兼容性:IE8+,moz,webkit,o
例如:background-color: hsl(240,100%,50%)。
2. hsla
这个样式不过是在hsl的基础上添加了透明度(0~1)。
四. 文本
1. text-shadow
作用:设置文字的阴影效果
取值:h-shadow:水平阴影位置。v-shadow:垂直阴影位置。blur:模糊的距离。color:颜色。
兼容性:ie9+ moz webkit o
例如:text-shadow:0 0 3px #FF0000;
2. text-overflow
作用:当文本溢出的时候的处理
取值:ellipse:使用省略号代替;clip:裁剪溢出的部分。
兼容性:都支持。
三. 用户界面
1. box-sizing
作用:盒模型的切换
取值:border-box(width=content);content-box(width=border+padding+content)
兼容性:IE7+ moz,o,webkit
2. outline
作用:绘制轮廓外边框
取值:outline-color:外边框颜色;outline-width:外边框宽度;outline-style:样式;outline-offset: 外边框偏移量。
兼容性:IE不支持outline-offset。其余的所有浏览器都支持。
css3的学习笔记1的更多相关文章
- CSS3 Animation学习笔记
Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...
- css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
- 《The Book of CSS3》学习笔记
一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...
- CSS3选择器学习笔记
CSS选择器总结: 一.基本选择器 1.通配选择器:[ * ] 选择文档中所以HTML元素. *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置marg ...
- css3 3d学习笔记
几个属性: -webkit-perspective:0;景深(默认0), -webkit-perspective-origin:center center;景深基点(默认中间), -webkit-tr ...
- CSS3+HTML5学习笔记(1)
box内阴影: -moz-box-shadow:inset 30px #; -webkit-box-shadow:inset 30px #; box-shadow:inset 30px #; 多重文字 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- UNIX网络编程-send、recv、sendto、recvfrom详解
send.recv和sendto.recvfrom,一般情况下,send.recv在TCP协议下使用,sendto.recvfrom在UDP协议下使用,也可以在TCP协议下使用,不过用的很少. 1.s ...
- nodejs将PDF文件转换成txt文本,并利用python处理转换后的文本文件
目前公司Web服务端的开发是用Nodejs,所以开发功能的话首先使用Nodejs,这也是为什么不直接用python转换的原因. 由于node对文本的处理(提取所需信息)的能力不强,类似于npm上的包: ...
- Libevent 定时器
先摘一点网上的介绍 libevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,内部使用select.epoll.kqueue等系统调用管理事件机制.著名分布式缓存软件 ...
- 由于httpClient调用导致的ESTABLISHED过多和 Connection rest by peer 异常
问题描述: 生产环境突然之间出现了大量的Connection rest by peer.后来使用netstat -an | grep 服务端口号发现有大量来自A10服务器的ESTABLISHED连接, ...
- Error : Must specify a primary resource (JAR or python or R file)
spark-submit 报错:must specify resource 取消关注 | 1 ... 我的submit.sh内容: /bin/spark-submit \ --class abc.pa ...
- 【226】C# 相关功能实现代码
目录: 1. 实现代码的等待操作 2. 实现文件夹/文件打开操作 3. 建立事件模板,然后调用 4. 用代码在Form中写控件,同时可以编写控件数组 5. 用代码执行事件 1. 实现代码的等待操作 ...
- Python全栈开发day3
1.Pycharm使用介绍 1.1 新建py文件自动添加python和编码 1.2 更改pycharm默认字体和风格 点击左上角“file”-->“Settings”(或者用“Ctrl+Alt+ ...
- Modbus协议
总体上来说,发送命令格式如下:模块号(1字节)功能码 起始地址(2字节) 数据(X字节) CRC(2位) 模块号(1字节)功能码(要读取的寄存器,读 01,设置05,Coil Status/Inp ...
- jQuery 屏幕遮罩
1.先做一个可以覆盖整个屏幕的div,颜色为黑色,然后再设置透明度,作为遮罩#zhezhao { position: absolute; top: 0px; left: 0px; width: 100 ...
- 分布式Hbase-0.98.4在Hadoop-2.2.0集群上的部署
fesh个人实践,欢迎经验交流!本文Blog地址:http://www.cnblogs.com/fesh/p/3898991.html Hbase 是Apache Hadoop的数据库,能够对大数据提 ...