/* public.css */
body {
width:100%;
height:100%;
font-family:'微软雅黑';
}
/**
* 圆角
* border-top-left-radius 水平半径 垂直半径
* border-top-right-radius 水平半径 垂直半径
* border-bottom-left-radius 水平半径 垂直半径
* border-bottom-right-radius 水平半径 垂直半径
*/
#border-radius {
height:100px;
width:300px;
border-radius:15px 25px 35px 0;
}
/**
* 阴影效果
* box-shadow:x轴偏移量 y轴偏移量 模糊阴影长度 阴影扩展半径 颜色 (inset)内侧或外侧阴影 (写几层就有几重阴影)
* opera safari使用border-image内阴影失效
* 注: 阴影不算宽度
*/
#box-shadow {
box-shadow:5px 5px 15px #FF0000 inset;
background:#151515;
}
/**
* 文字阴影
* text-shadow:x轴偏移量 y轴偏移量 模糊阴影长度 阴影扩展半径 颜色 (写几层就有几重阴影)
*/
#text-shadow {
font-size:18px;
color:#FFF;
text-shadow:2px 2px 5px #FF0000, 2px 2px 5px #FF0000;
}
/* 加载字体(适用于英文字体，中文字体太大) */
/*@font-face {
font-family:'自定义字体名字';
src:'引用字体的路径';
}*/
@font-face {
font-family:'SingleMaltaRegular';
src:url('singlemalta-webfont.eot'),
url('singlemalta-webfont.ttf');
}
h3 {
font-family:'SingleMaltaRegular';
}
/**
* background 多背景
* 先进入的排在上面
*/
{
/* 通过调用多个url设置多背景 */
background:url(a.jpg) no-repeat left top, url(b.jpg) repeat left top;
/* 分别设置裁切 原点 大小 */
-webkit-background-clip:border-box, content-box;
-webkit-background-origin:border-box, content-box;
-webkit-background-size:100px 20px, 20% 20%;
}
/**
* background-size 设置背景图片大小
* 可以引用N张背景图片 background:url(1.jpg), url(2.jpg);
* background-size:百分比 像素 cover contain;
* cover 以最小的值放大或缩小到全屏
* contain 以最大的值放大或缩小到全屏
*/
{
background:url(1.jpg) no-repeat right 100px, url(2.gif) no-repeat right top;
background-size:150px 150px;
background-size:cover;
background-size:contain;
}
/**
* background-clip 背景裁切
* border-box 默认值
* padding-box 按边框裁切
* content-box 按边框 padding裁切
* 注:[只能在no-repeat模式下好使]
*/
{
-webkit-background-clip:padding-box;
/* 火狐下写法 */
-moz-background-clip:padding;
}
/* border-image 图片裁切 */
/* border-image:url() x轴显示方式 y轴显示方式; */
/* round 水平平铺 */
/* repeat 重复 */
/* stretch 拉伸 */
{
border:10px #000 solid;
-webkit-border-image:url(2.png) 10 round round;
-o-border-image:url(2.png) 10 round round;
border-image:url(2.png) 10 round round;
overflow:hidden;
}
/* Css3基本选择器 */
.demo {
width:300px;
border:2px solid #ccc;
padding:10px;
zoom:1;
}
.demo .d1, .demo .d2 {
width:200px;
height:40px;
}
.demo .dd1, .demo .dd2 {
width:150px;
height:20px;
}
/*
* 测试的时候 分别打开注释看效果
*/
/* 子元素选择器 E > F */
/* 表示选择下一层级别 其他更深的层次不管 */
.demo > div {
}
/* 相邻兄弟元素选择器 E + F */
/* 不兼容IE6 */
.d1 + div {
}
/* 选择某元素后面的所有兄弟元素 */
.d1 ~ div {
}
/* 伪元素 */
.firstChild {
width:100px;
border:2px #00F solid;
}
/* :first 选中第一行文本 */
.firstChild::first-line {
/*color:#F00;*/
}
/* :first-letter */
.firstChild:first-letter {
/*color:#F00;
margin:0 0 0 10px;*/
}
.firstChild::before {
content:'11111';
color:#f00;
}
.firstChild::after {
content : '2222';
color:#0f0;
}
/* 获取焦点 */
input:focus {
}
/* 只读 */
input:disabled {
}
/* 选中 */
input:checked {
}
/**
* 给文字添加省略号
* 外层元素必须是block
*/
.textOverflowEllipsis {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
/* 属性选择器 E[attr] */
/* 优先级别 === .demo div .class */
.demo div[id] {
/*background:#00f*/
}
/* 多属性选择器 E[attr][attr]... */
/* 一个属性相当于一个class的级别 */
.demo div[id][class] {
/*background:#0F0;*/
}
/* 带属性值的选择器 E[attr='value'] */
/* 属性和值必须完全匹配 包括空格个数 */
.demo div[id='d1'] {
/*border:1px #f00 solid;*/
}
/* 带多个属性值的选择器 E[attr=''][]... */
.demo div[id='d1'][class] {
/*border:1px #00f solid;*/
}
/* CSS3选择器 */
/* 选择每层第一个元素 */
.demo div:first-child {
/*border:2px #f00 solid;*/
}
/* 在first-child后面追加其他属性 */
.demo div:first-child div[id] {
/*border:2px #f00 solid;*/
}
/* 选择每层的最后一个元素 */
.demo div:last-child {
/*border:2px #f00 solid;*/
}
/* nth-child 根据传的参数不同选择不同的元素 */
/* 选择第二个元素 */
.demo div:nth-child(2) {
/* border:2px #f00 solid; */
}
/* 选择2的倍数的元素 变量必须是n */
.demo div:nth-child(2n) {
border:2px #f00 solid;
}
/* 选中指定元素 */
/* nth-of-type 根据指定元素定位，其他元素不算位置 */
/*
只算p的位置
<div>
<span></span>
<p></p>
<p></p>
</div>
*/
.ofType p:nth-of-type(n) {
color:#f00;
}
/* :empty 选中空元素 */
/* :not() 不包含某个条件 */
/*
*:not(p) 所有元素下不包含p元素
li:not([class=a]) 不包含class=a的li元素
*/
/**
* 渐变
* linear-gradient 线性渐变 不支持百分比
(top left, 颜色, 颜色, 颜色...)
* radial-gradient 径向渐变 支持百分比
(50% 50%, 颜色...)
*/
/* 5% 渐变的起始位置 */
#gradient {
width:200px;
height:200px;
background:-moz-linear-gradient(top, rgba(255,255,255,0) 5%, rgba(255, 0, 0, 1) 5%), url(2.jpg);
background:-webkit-linear-gradient(top, rgba(255,255,255,0) 5%, rgba(255, 0, 0, 1) 5%), url(2.jpg);
/* IE10渐变 */
background:-ms-linear-gradient(top, #FFfffF, #D9E6FA);
/* IE8-- */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000);
}
/* 透明度 */
/* rgba(r颜色，g颜色, b颜色, 透明度) */
.rgba {
width:200px;
list-style-type:none;
padding:0;
}
.rgba .textRgba {
font-size:14px;
font-weight:bold;
color:rgba(255, 0, 0, 0.5);
}
.rgba .borderRgba {
border:5px rgba(255, 0, 0, 0.1) solid;
}
.rgba .textShadow {
font-size:24px;
text-shadow:0 5px 1px rgba(255,0,0,0.3);
}
.rgba .boxShadow {
box-shadow:0 2px 2px rgba(255,0,0,0.6);
}
/*
* transform 属性
* 变形 *注 : [做缩放文字动画时 文字大小一开始就要定义好 最大缩放比例为1 如果大于1会出现闪动]
* translate rotate scale 如果需要写这3个属性 需要写在一起
transform : translate rotate scale
*注 : [如果scale在第一个位置则translate移动的距离如果按百分比计算 它会取缩放后的宽高]
*/
/* 3D空间属性 */
{
/* 所有元素在3D空间中呈现 */
transform-style:preserve-3d;
/* 默认 所有元素在2D空间中呈现 */
transform-style:flat;
}
/* 3D空间透视的距离 */
{
/* 值越大 节点呈现越小 当元素在z轴的移动距离大于视距时节点不可见 */
/* 用在父元素上 */
perspective : 1000px;
/* 用在某个节点上 */
/* 用在父元素和某个节点上的区别:父元素上影响所有节点 用在某个节点上只影响它自己 */
transform:perspective(600px);
}
/* 3D空间透视中心点 */
{
/* 决定从哪个位置对节点进行透视 不同位置展现不同 */
/* 注 : [父节点大小 决定origin的透视位置] */
perspective-origin:;
}
/* X,Y轴旋转 */
{
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
/* Z轴旋转 */
{
transform:rotateZ(30deg);
/*
轴的旋转是由一个x,y,z向量并经过元素原点
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值
例 : rotate3d(1, 0, 0) 沿着X轴旋转
rotate3d(0, 1, 0) 沿着Y轴旋转
rotate3d(0, 0, 1) 沿着Z轴旋转
rotate3d(1, 1, 0) 根据X轴 Y轴的矢量合成第3条矢量进行旋转
*/
transform:rotate3d(x, y, z);
}
/* X, Y轴移动 */
{
/* x, y方向移动 */
-webkit-transform:translate(50px, 120px);
-moz-transform:translate(50px, 20px);
/* 单方向移动 (可以用x,y方向代替) 单方向移动设置origin失效 */
/*
transform:translateX(30px);
transform:translateY(30px);
-webkit-transform:translateX(30px);
-webkit-transform:translateY(30px);
*注: translateX, translateY只能写一个
*/
}
/* Z轴移动 2种方式 */
{
-webkit-transform:translate3d(x, y, z);
-webkit-transform:translateZ(位移);
}
/* 缩放 */
{
transform:scale(1.5, 1);
-webkit-transform:scale(1.5, 1);
}
/* 变形 */
{
transform:skew(-20deg, 20deg);
-webkit-transform:skew(20deg, 20deg);
}
/**
* origin 设置基点
* 参数:
* top left
* 百分比
* 具体数值
*/
.origin {
-webkit-transform-origin:left top;
-webkit-transform:rotate(10deg);
transform-origin:left top;
transform:rotate(10deg);
background:#f2a7ff;
}
/**
transition 动画效果 必须是从一个状态到另外一个状态才有效果
*注 : [只变换transition里的写的效果]
*/
/* transition 动画效果 必须是从一个状态到另外一个状态才有效果 */
/* transition-property : [设置成none不改变任何属性] [默认设置成all 改变所有属性] */
/* transition-duration : 时间s */
/* transition-timing-function 改变效果的时候动画效果 : [ease 逐渐改变 | linear 匀速 | ease-in 加速 | ease-out 减速 | ease-in-out 加速然后减速] */
/* transition-delay 动画延迟 : 时间s */
#transition .ease {
display:block;
width:100px;
height:100px;
color:#f00;
background:#99F;
/*transition:background 0.5s ease-in 2s;*/
/* 用不同效果改变不同属性需要用","分割 */
/* 执行顺序是从前往后以此执行完 */
-moz-transition:background 1s ease 0.1s, color 1s ease-in 0.1s;
}
#transition .ease:hover {
background:#000;
color:#FFF;
}
/**
* animation 属性可以继承 前面的继承后面的属性 keyframes里写的属性是需要变化的属性
* 例: 本例中60%的color属性会被60%以前的百分比状态继承
* 可以继承多个keyframes属性 animation:wobble 2s ease, wobble2 2s ease....;
* 注: 最好把变化的属性都写上
* animation 与 transtion区别
transition 没有多次循环属性
*/
/* @-moz-keyframes */
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
width:100px;
}
40% {
margin-left: 0;
width:200px;
}
60% {
margin-left: 0;
width:300px;
/* color 会被继承 */
color:#F00;
}
70% {
margin-right:100px;
}
100% {
margin-left: 100px;
width:400px;
}
}
@-webkit-keyframes 'wobble2' {
0% {
margin-left: -100px;
height:100px;
}
40% {
margin-left: 0;
height:200px;
}
60% {
margin-left: 0;
height:300px;
}
70% {
margin-right:-100px;
}
100% {
margin-left: -100px;
height:400px;
}
}
/**
// 引用名字
alternate 偶数 奇数的区别
animation-name : 'wobble'
// 动画执行时间
animation-duration : 2s
// 动画执行效果
animation-timing-function : ease-in-out
// 动画延迟多少秒执行
animation-delay : 5s
// 动画循环次数 infinite表示无限循环
animation-iteration-count : 5
// 反向继承 100% 对应 0% 以此类推 0%被100%前的继承
*/
#animation {
width:50px;
height:50px;
border:5px #f00 solid;
/* 多个样式一起执行 */
-webkit-animation:'wobble' 2s ease-in-out 2s 1 alternate, 'wobble2' 2s ease-in-out 4s 1 alternate;
-moz-animation:'wobble' 2s ease-in-out 2s 1 alternate;
}
/**
* background-origin 设置背景原点
* padding-box 默认
* border-box 以边框最外处为0, 0点
* content-box 以内容最外处为0, 0点
*/
/* background 多背景效果 */
/* 加载的背景图片，越靠后的它的z-index越低 */
#background {
width:200px;
height:150px;
border:20px rgba(100, 100, 100, 0.5) solid;
background:url(1.gif) no-repeat left top, url(2.gif) no-repeat right top, url(3.gif) no-repeat left bottom, url(4.gif) no-repeat right bottom;
/* 以border为边缘进行裁切 */
-webkit-background-origin:border-box;
-moz-background-origin:border;
background-origin:border-box;
}
/**
box-sizing 设置盒模型标准
box-sizing : content-box W3C模式
box-sizing : border-box IE怪异模式
*/
{
width:100px;
height:100px;
padding:15px;
border:10px #f00 solid;
/* IE怪异模式 */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
/* W3C正常模式 */
-webkit-box-sizing:centent-box;
-moz-box-sizing:centent-box;
}
/**
* calc 动态计算元素
* 可以使用 + - * /
*/
{
/* 运算符前后必须有空格 */
width : -webkit-calc(100% - 20px);
width : -moz-calc(100% - 20px);
width : calc(100% - 20px);
}
/**
** 媒体查询
* 引入媒体类型:
1.
例一: 小于600px的可以引用1.css
<link rel="stylesheet" type="text/css" href="1.css" media="screen and (max-width:600px)" />
例二: 大于300像素
<link rel="stylesheet" type="text/css" href="1.css" media="screen and (max-width:600px) and (min-width:300px)" />
2.
<style type="text/css">
@media screen and (媒体特性){
选择器 {
}
}
</style>
* 媒体特性
* 多媒体类型引入
<link rel="stylesheet" media="handheld and (min-width:700px), screen and (max-width:900px)" />
* 所有相关属性:
screen : 一种媒体查询类型
and : 与
orientation:portrait 竖屏
orientation:landscape 横屏
max-device-width, max-device-height:屏幕的尺寸
max-width, max-height:浏览器的尺寸
not screen (max-width:100px) 排除复合表达式的设备
*/
/**
* ::selection 改变背景色 字体颜色
*/
::selection {
background:#F9C;
color:#000000;
}
::-moz-selection {
background:#F9C;
color:#000000;
}
/**
flex-box
* display:box 将一个元素以弹性布局进行布局
* box-flex : 子元素分配空间
* box-orient : [horizontal 水平布局 | vertical 垂直布局 ] 主轴的方向
* box-direction : [normal 正常排序 | reverse 反向排序 | inherit] 只改变排序 不颠倒主轴方向
* box-align : [center | start | end | baseline] 垂直对齐方式
* box-pack : [center | start | end | justify] 水平对齐方式
* box-ordinal-group : 元素的排列顺序
* 注:
* 当有margin时 宽度会去除margin以后再除以flex总数
* box-align 使用时 元素不会充满全屏 如果不给高度 高度根据内容适应
* 只对block元素好使
*/
/* 水平居中 */
#boxAlign {
width:200px;
height:200px;
border:5px #0f0 solid;
-moz-box-align:center;
-webkit-box-align:center;
display:-moz-box;
display:-webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
}
#boxAlign .con {
width:50px;
height:50px;
border:5px #00f solid;
}
#flexBox {
margin:0;
padding:0;
list-style-type:none;
display:-webkit-box;
display:-moz-box;
width:100%;
height:150px;
border:5px #0F0 solid;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-direction:reverse;
}
#flexBox li {
border:2px #F00 solid;
}
#flexBox li:nth-child(1) {
-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
}
#flexBox li:nth-child(2) {
-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
}
#flexBox li:nth-child(3) {
-webkit-box-flex:2;
-moz-box-flex:2;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
}
/**
FlexBox
* 内容 : 弹性盒模型包括主轴 侧轴
* 伸缩容器的属性
* display 伸缩容器:
flex 块级
inline-flex 内联
* flex-direction 主轴方向:
row 默认，从左到右
row-reverse 从右向左
column 从上到下
column-reverse 从下到上
* flex-wrap 伸缩容器是单行还是多行 并控制侧轴的方向，侧轴的方向决定堆放的方向
nowrap(默认值) | wrap(多行显示) | wrap-reverse(多行显示-反方向 从下往上排列)
* justify-content 伸缩项目在主轴上的对齐方式:
flex-start 默认，向伸缩容器的起始位置对齐
flex-end 向伸缩容器的的终点位置对齐
centent 向伸缩容器的中间位置对齐
space-between 伸缩项目平均分布 第一个伸缩项目在伸缩容器中最开始位置 最后一个伸缩项目在伸缩容器中的终点位置
space-around 伸缩项目平均分布在伸缩容器里 两端保留一半的空间
* align-content 伸缩项目在侧轴上的对齐方式(多行模式)
flex-start 向伸缩容器的起始位置对齐
flex-end 向伸缩容器的结束位置对齐
center 向伸缩容器的中间位置对齐
space-between 在伸缩容器里平均分布
space-around 在伸缩容器里平均分布 两边各有一半空间
stretch 各行将会伸展占用剩余空间 会受max-... min-... 影响
* align-items 伸缩项目在侧轴上的对齐方式(对单行对齐进行控制)
flex-start 侧轴的起始位置
flex-end 侧轴的结束位置
center 侧轴中心位置
baseline 基线对齐
stretch 默认，如果没设置高度 伸缩项目默认填充整个容器 如果有max-height max-width等属性 会受到影响
* flex-grow 伸缩项目占用多少剩余空间(如果给一个元素设置了width又设置了flex-grow 剩余空间=总宽度-width)
number 占用空间比例 注:[给每个元素一个宽度 会让所有元素忽略内容长短带来的宽度影响 如果不给宽度 每
个元素的宽是等于去掉内容以后的宽度]
* 伸缩项目上的属性
* order 伸缩项目在文档流中出现的位置
* align-self 伸缩项目在侧轴上的对齐方式
flex-start 侧轴的起始位置
flex-end 侧轴的结束位置
center 侧轴的中心位置
baseline 基线对齐
实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)
*/
/* 去除点击阴影 */
/* 阴影变成0，点击时就和原生按钮一样，没有阴影 */
#highlight {
-webkit-tap-highlight-color:rgba(255, 0, 0, 0);
}
/**
* columns 列数和列宽
* column-count 列数
* column-width 宽度(宽度和列数都有的情况下以列数为准)
* column-gap 列间距(类似margin)
* column-rule
*/
/**
* 截取多行文字
display:-webkit-box;
overflow:hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
*/
a, img {
-webkit-touch-callout:none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
-webkit-user-select:none; /* 禁止选中文本（如无文本选中需求，此为必选项） */
user-select: none;
}
/**
* 允许长单词换行到下一行
* word-wrap : normal 默认处理
break-word 长单词换行
*/
p {
word-wrap:break-word;
}
/**
* box-reflect 倒影效果
none 默认值 没有效果
above 倒影在对象的上方
below 倒影在对象的下方
left 倒影在对象的左侧
right 倒影在对象的右侧
offset 倒影和对象之间的距离 可以是正值 负值
遮罩效果 可以用渐变 或 背景图片
*/
{
/* 渐变的背景 渐变的方向从下到上 */
-webkit-box-reflect:above 20px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
/* 图片裁切的 倒影 */
-webkit-box-reflect:above 20px url(图片);
}
/**
* 轮廓 outline *注[outline不占用任何空间]
* outline : 2px #f00 solid;
*/
/**
* display:table 表格属性 块级表格
* display:table-cell 做为td或th使用
*/
/**
* text-transform 控制字母大小写
*/
{
/* 字母转换成大写 */
text-transform:uppercase;
/* 字母转换成小写 */
text-transform:lowercase;
/* 首字母大写 */
text-transform:capitalize;
}
/**
* backface-visibility 旋转隐藏
*/
{
/* 背面不可见 */
-webkit-backface-visibility:hidden;
/* 背面是可见的 */
-webkit-backface-visibility:visible;
}
/**
* pointer-events 穿透下一层元素
*/
{
/* 下层元素可点击 */
pointer-events:none;
/* 下层元素不可点击 */
pointer-events:auto;
}
/**
* appearance 改变按钮的默认风格
*/
{
/* 无风格 */
-webkit-appearance:none;
/* 修改select时 可以用这个样式 直接带三角 */
-webkit-appearance:default-button;
}
/**
* -webkit-overflow-scrolling 快速滚动和回弹
*/
{
/* 快速滚动和回弹效果 */
-webkit-overflow-scrolling:touch;
}
/**
* 剪切 clip-path
* ellipse : 椭圆
* circle : 圆
* polygon : 多边形
*/
{
-webkit-clip-path:ellipse(100px 50px);
-webkit-clip-path:circle(50px);
-webkit-clip-path:polygon(100px 50px, 150px 200px, 50px 100px, 250px 350px);
/* 这里要加上overflow 否则将以最大图形中间点为原点开始剪切 */
overflow:hidden;
}
/* CSS3 计数器 */
{
/**
* 定义计数器的名称
* counter-reset(计数器名称 初始计数值) : 定义计数器名称 及 初始值
计数器名称 : 给其他标签用的名称
初始计数值 : 计数的初始值(可以是任何类型的值)
* section heading 是定义好的2个计数器的名称
可以用在任何标签上
*/
counter-reset:section 0 heading 0;
/**
* 明确div使用定义好的计数器 这里用的是section计数器
可以引用多个计数器 例:section section2 section3....
*/
counter-increment:section;
/**
* 在div中显示计数器
* 把计数器插入到节点里
* counter 可以使用N个 counter(xx) counter(xx)...
*/
content:counter(heading) ' ' counter(section) ' ';
}