css3手记
来源:互联网 发布:9月经济数据 编辑:程序博客网 时间:2024/05/18 03:12
完全匹配属性选择器:[id=value]
包含匹配选择器:[id*=value]
首字符匹配选择器:[id^=value]
尾字符匹配选择器:[id$=value]
阴影:box-shadow:3px 2px 1px #000 /*其他浏览器*/
-webkit-box-shadow:3px 2px 1px #000 /*webkit浏览器*/
-moz-box-shadow:3px 2px 1px #000 /*firefox浏览器*/
text-shadow和box-shadow差不多
背景:backgroud-size 设置背景图像大小 backgroud-size:10px 5px ; -webkit-backgroud-size:10px 5px;
backgroud-clip 确定背景的剪裁区域
渐变 background:-webkit-gradient(linear/radial,0 0,0 100%,from(#fff) ,to(#000) );
线性渐变/径向渐变
圆角边框: border-radius:10px 5px;
-webkit-border-radius:10px 5px;
-moz-border-radius:10px 5px;
使用viewport设置适应移动设备屏幕大小
<meta name="viewport" content="width=device-width,inital-scale=1,user-scalable=0" />
属性有:width:指定虚拟窗口的屏幕宽度大小
height:虚拟窗口屏幕高度
inital-scale:初始缩放比例
maximum-scale:允许用户缩放的最大比例
minimum-scale:允许用户缩放的最小比例
user-scalable:是否允许手动缩放
使用media queries
当前屏幕可视区域的宽度最大值为600px时
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" />
small.css:
@media screen and(max-width:600px){
demo{
background:#000;
}
}
屏幕可视区域的长度在600px到900px之间时
media="screen and(min-width:600px) and (max-width:900px)"
当手机最大屏幕可视区域是480px时
media="screen and(max-device-width:480px)"
当移动设备处于纵向模式下时
media="all and(orientation:portrait)"
当移动设备处于横向模式下时
media="all and(orientation:landscape)"
- css3手记
- CSS3属性: Flexbox 快速上手记
- css3 box-sizing 盒模型 学习手记
- 手记
- 手记
- 手记
- 手记
- css3
- css3
- css3
- css3
- css3
- css3
- CSS3
- CSS3
- css3
- CSS3
- css3
- HDU-4463-Outlets
- BT5无法启动图形界面问题
- 彩球分配问题:共有12个彩球,4个红的,4个白的,4个黄的,从中挑出8个球放入3个不同的口袋(口袋编号分别为a、b、c)编写程序打印输出所有可能的放法。
- AVL 树实现
- poj 3172 Scales
- css3手记
- Python 正则匹配学习
- gentoo双网卡绑定为bond
- eclipse导入jquery包后报错
- (++i)+(++i)+(++i)之类 顺序点和副作用
- poj 2842 窗口里的星星
- 图像的ASCII码显示v1—ASCII art--just for fun
- [10月31日的脚本] 在PowerPoint 2007中修改图片压缩分辨率设置
- 读《影响力 Influence:The psychology of Persuasion》-罗伯特.西奥迪尼著(上)