1.圆角border-radius
- border-radius的四个值分别代表：左上 右上 右下 左下
- border-top-left-radius:左上角的圆角
- border-top-rigth-radius:右上角的圆角
- border-radius:1 2 3 4(左上X 右上X 右下X 右上X)/1 2 3 4(左上Y 右上Y 右下Y 右上Y)
2.盒子阴影box-shadow(降低性能)
- box-shadow的值分别代表：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色][投影方式]
- 阴影模糊半径：不能取负值，值越大模糊的棱角不清
- 阴影扩展半径：负值是缩，1是不大不小，值越大阴影越大
- 投影方式：inset向左上投影
- 同一盒子，可以同时加多个阴影，阴影之间用“，”隔开
.box_shadow{
box-shadow:4px 2px 6px #f00,-4px -2px 6px #000,0px 0px 12px 5px #33cc00 insert;
}
3.文本阴影text-shadow
- text-shadow；X-Offset Y-Offset Blur color
- X-Offset:表示阴影的水平偏移距离，其值为正值是阴影向右偏移，反之向左偏移
- Y-Offset:表示阴影的垂直偏移距离，正值时向下偏移，反之向上
- Blur：是指阴影的模糊程度，不能是负值，值越大阴影越模糊，反之越清晰，0是没有阴影模糊
text-shadow: 0 1px 1px #fff;
4.颜色值
- RGB是由红绿蓝的变化以及相互叠加得到各式各样的颜色
- RGBA是在RGB的基础上增加了控制alpha透明度的参数
- RGB的取值范围0-255；0%~100.0% ，超出范围的数值会被截取至最近的有效取值
- A的取值在0~1之间，不能为负
5.css3的渐变
- 线性渐变：linear-to
- linear-gradient([direction],color[percent],color[percent]…)
direction角度的单位为‘deg’,也可以用to bottom,to left,to top left等方式 - 径向渐变：radial-at
- radial-gradient(shape at position,color[percent],color[percent]…)
shape:放射的形状，圆形circle,椭圆ellipse,
position圆心位置：可以是两个值，如果为一个值第二个值是默认值center（即50%）
6.文字边界换行word-wrap
- word-wrap:normal | break-word
7.font-face：字体
8.边框应用背景border-image
- border-image:url(xxx.png) number
- stretch:拉伸，有多长拉伸多长
- repeat:和4角上同等大小的图片进行平铺，当框中区域长度不是四角图片大小的整数倍时会被切割
- round:4角上的图片进行拉伸平铺不会被切割
- number为截取指定图片四周的宽度作为border的背景填充
9.背景图片引入background-origin
- border-box:从border区域开始引入
- padding-box：默认
- content-box
10.裁剪背景图片background-clip
- border-box:默认
- padding-box
- content-box
- no-clip
11.裁剪背景图片尺寸background-size
- contain
11.裁剪背景图片位置background-position
- center
12.css3选择器
-
属性选择器
伪类的效果可以通过添加一个实际的类来达到
伪元素的效果则需要通过添加一个实际的元素来达到 -
E[att ^=“val”]{}选择匹配元素E,且E元素定义了属性att，其属性值是以val开头的任何字符串
-
E[att $=“val”]{}选择匹配元素E,且E元素定义了属性att，其属性值是以val结尾的任何字符串
-
E[att *=“val”]{}选择匹配元素E,且E元素定义了属性att，其属性值任意位置出现了“val”,即属性值包含了“val”,位置不限
input[age*='18']{
color:#000;
}
-
伪元素选择器：当前标签里面的东西
-
：after
-
：before
-
选中文档里面的内容
-
：first-letter
-
：first-line
-
：selection
用来匹配突出显示的文本（用鼠标选择文本的时候），浏览器默认情况下，用鼠标选择网页文本是“l蓝色的背景，白色的字体”
user-select:none 不让用户选中 -
伪类选择器
-
;root根标签选择器等同于
-
：not否定选择器
除了class为deno的div以外
div:not([class='demo']){
color:red;
}
-
：empty空标签选择器
用来选择没有内容的元素、不在文档树中的元素，这里的没有内容指的是没有一点内容，哪怕是一个空格 -
target目标元素选择器
用来匹配被location.hash选中的元素（即锚点元素），选择器可用来选取当前活动的目标元素 -
：first-child某个元素下的第一个子元素
-
：last-child最后一个子元素
-
：nth-child(){}第xx个子元素，n代表变量自然数
even/2n偶数 odd/2n+1奇数 -
：nth-last-child(){}从后往前数
限制了类型，即所在修饰元素的类型下选择特定位置的元素 -
:first-of-type第一个子元素
-
：last-of-type最后一个子元素
-
：nth-of-type
-
：nth-last-of-type(){}从后往前数
有些表单元素有enable和disable的状态，比如输入框、密码框、复选框等 -
：enable可用的元素
-
：disable不可用的元素
-
：checked选择框的选中状态
checkbox,radio的一些默认状态不可用属性进行改变，如边框颜色 -
：read-only选中只读的元素
<input type ='text' readonly='readonly'/>
- ：read-write选中非只读的元素
- 条件选择器
E>F直接子元素（只能找儿子不能找孙子）
E+F后面紧挨着的兄弟节点
E~F后面的兄弟节点
5.css3的动画
形状变换
transform: none|transform-functions;
- transform可以实现元素的形状、角度、位置等的变化
- rotate()以XYZ为轴进行旋转，默认为Z
- rotateX()，rotateY()，rotateZ(),rotate3d（X,Y,Z,angle）
- scale()以X/Y轴进行缩放
- scale(x,y)接收两个参数，如果第二个未提供，则第二个参数使用第一个参数
- scalex(),scaley(),scalez()值是数字表示倍数，不加任何单位
- scale3d()->scale3d(sx,sy,sz)
- skew()对元素进行倾斜扭曲
- skew(x,y)接收两个值，第一个值对应X轴，第二个参数对应Y轴，如果第二个参数未提供，则默认值为0
- translate()可以移动距离相对于自身位置
- translatex（）translatey（）translatez（）translate3d（x,y,z）
- transform-origin:关键字（left top）| 百分比 | 像素值
变换原点，任何一个元素都有一个中心点，中心点是居中于元素x轴和y轴50%处
transition过渡动画
transition属性是css3的一个符合属性，包括以下子属性
transition: property duration timing-function delay;
- transition-property指定过渡或动态模拟的css属性
- transition-duration指定过渡所需要的时间
- transition-timing-function指定过渡函数
4. transtion-delay指定开始出现的延迟时间(ms/s)
animation动画
@keyframes动画关键帧
animation会按照keyframes关键帧里面指定的帧状态而过渡执行，0%-100%代表动画的时间过渡
5.animation-name 规定需要绑定到选择器的 keyframe 名称
5. animation-duration 规定完成动画所花费的时间，以秒或毫秒计
6. animation-timing-function 规定动画的速度曲线
8. animation-delay 规定在动画开始之前的延迟。
9. animation-iteration-count 规定动画应该播放的次数
n(播放n次)
infinite（无限次）
10. animation-direction 规定是否应该轮流反向播放动画。
normal(默认值，动画按正常播放)
reverse(动画反向播放)
alternate(动画在奇数次正向播放，在偶数次反向播放)
alternate-reverse(动画在奇数次反向播放，在偶数次正向播放)
div{
position:absolute;
left:0px;
top:30px;
width:100px;
heigth:100px;
background:red;
opacity:0;
animation:move 5s linear;
}
@keyframes move{
0%{
left:200px;
}
100%{
left:300px;
}
}
columns多列布局
父元素上设置
- columns:[columns-width][columns-count]
- columns-width:指每一列的宽度，根据容器宽度自适应（最小宽度）
- columns-count:指规定的列数 唯一精确的是列数
- columns–gap属性规定列之间的间隔。
- columns-rule不占任何空间位置，在列与列之间改变其宽度不会改变任何的位置
弹性盒子display:flex
flex为复合属性，且必须配合父元素display:flex使用
部分css属性在flexbox盒子里面不起作用：float,clear,column,vertical-align
以下6个属性设置在子元素上
- flex-grow放大比例
把剩余区域按照flex-grow的比例平均分配 - flex-shrink缩小比例
多出盒子的部分，按照比例大小砍掉相应的大小，默认值是1 - flex-basis伸缩基准值，项目占据主轴的空间（超出后按比例计算）
如果元素上同时出现了width和flex-basis那么flex-basis会覆盖width的值 - flex:是flex-grow,flex-shrink,flex-basis的简写
- order项目的排列顺序，从小到大进行排列
- align-self单个项目对齐方式，可以覆盖align-items属性。默认值是auto,表示继承父元素的align-items属性，如果没有父元素则等同于stretch
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
一下6个属性设置在容器上
12.flex-direction决定主轴的反向
12. flex-wrap是否换行
13. flex-flow是flex-direction和flex-wrap的简写
14. justify-content项目在主轴上的对齐方式
15. align-items在侧轴上如何对齐
16. align-content多根轴线的对齐方式
响应式布局
模拟移动端
17. <meta name ="vieport" content ="width=device-width,initial-scal=1.0">
width=device-width适口宽度=设备的宽
initial-scal=1.0视觉效果
use-scaleble =no是否允许用户进行缩放
minimum-scal最小缩放
maximun-scal最大缩放
媒体查询
<link rel="stylesheet" media ="screen and (max-width:800px)" href =""xxx.css>@media(max-width:60px){div{}}@media screen and(max-width:800px) and (min-width:600px){...}
4968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
