淘先锋技术网

首页 1 2 3 4 5 6 7

1.圆角border-radius

  1. border-radius的四个值分别代表:左上 右上 右下 左下
  2. border-top-left-radius:左上角的圆角
  3. border-top-rigth-radius:右上角的圆角
  4. border-radius:1 2 3 4(左上X 右上X 右下X 右上X)/1 2 3 4(左上Y 右上Y 右下Y 右上Y)

2.盒子阴影box-shadow(降低性能)

  1. box-shadow的值分别代表:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色][投影方式]
  2. 阴影模糊半径:不能取负值,值越大模糊的棱角不清
  3. 阴影扩展半径:负值是缩,1是不大不小,值越大阴影越大
  4. 投影方式:inset向左上投影
  5. 同一盒子,可以同时加多个阴影,阴影之间用“,”隔开
.box_shadow{
 box-shadow:4px 2px 6px #f00,-4px -2px 6px #000,0px 0px 12px 5px #33cc00 insert;
}

3.文本阴影text-shadow

  1. text-shadow;X-Offset Y-Offset Blur color
  2. X-Offset:表示阴影的水平偏移距离,其值为正值是阴影向右偏移,反之向左偏移
  3. Y-Offset:表示阴影的垂直偏移距离,正值时向下偏移,反之向上
  4. Blur:是指阴影的模糊程度,不能是负值,值越大阴影越模糊,反之越清晰,0是没有阴影模糊

4.颜色值

  1. RGB是由红绿蓝的变化以及相互叠加得到各式各样的颜色
  2. RGBA是在RGB的基础上增加了控制alpha透明度的参数
  3. RGB的取值范围0-255;0%~100.0% ,超出范围的数值会被截取至最近的有效取值
  4. A的取值在0~1之间,不能为负

5.css3的渐变

  1. 线性渐变:linear-to
  2. linear-gradient([direction],color[percent],color[percent]…)
    direction角度的单位为‘deg’,也可以用to bottom,to left,to top left等方式
  3. 径向渐变:radial-at
  4. radial-gradient(shape at position,color[percent],color[percent]…)
    shape:放射的形状,圆形circle,椭圆ellipse,
    position圆心位置:可以是两个值,如果为一个值第二个值是默认值center(即50%)

6.文字边界换行word-wrap

  1. word-wrap:normal | break-word

7.font-face:字体

8.边框应用背景border-image

  1. border-image:url(xxx.png) number
  2. stretch:拉伸,有多长拉伸多长
  3. repeat:和4角上同等大小的图片进行平铺,当框中区域长度不是四角图片大小的整数倍时会被切割
  4. round:4角上的图片进行拉伸平铺不会被切割
  5. number为截取指定图片四周的宽度作为border的背景填充

9.背景图片引入background-origin

  1. border-box:从border区域开始引入
  2. padding-box:默认
  3. content-box

10.裁剪背景图片background-clip

  1. border-box:默认
  2. padding-box
  3. content-box
  4. no-clip

11.裁剪背景图片尺寸background-size

  1. contain

11.裁剪背景图片位置background-position

  1. center

12.css3选择器

  1. 属性选择器
    伪类的效果可以通过添加一个实际的类来达到
    伪元素的效果则需要通过添加一个实际的元素来达到

  2. E[att ^=“val”]{}选择匹配元素E,且E元素定义了属性att,其属性值是以val开头的任何字符串

  3. E[att $=“val”]{}选择匹配元素E,且E元素定义了属性att,其属性值是以val结尾的任何字符串

  4. E[att *=“val”]{}选择匹配元素E,且E元素定义了属性att,其属性值任意位置出现了“val”,即属性值包含了“val”,位置不限

input[age*='18']{
   color:#000;
}
  1. 伪元素选择器:当前标签里面的东西

  2. :after

  3. :before

  4. 选中文档里面的内容

  5. :first-letter

  6. :first-line

  7. :selection
    用来匹配突出显示的文本(用鼠标选择文本的时候),浏览器默认情况下,用鼠标选择网页文本是“l蓝色的背景,白色的字体”
    user-select:none 不让用户选中

  8. 伪类选择器

  9. ;root根标签选择器等同于

  10. :not否定选择器

除了class为deno的div以外

div:not([class='demo']){
  color:red;
}
  1. :empty空标签选择器
    用来选择没有内容的元素、不在文档树中的元素,这里的没有内容指的是没有一点内容,哪怕是一个空格

  2. target目标元素选择器
    用来匹配被location.hash选中的元素(即锚点元素),选择器可用来选取当前活动的目标元素

  3. :first-child某个元素下的第一个子元素

  4. :last-child最后一个子元素

  5. :nth-child(){}第xx个子元素,n代表变量自然数
    even/2n偶数 odd/2n+1奇数

  6. :nth-last-child(){}从后往前数
    限制了类型,即所在修饰元素的类型下选择特定位置的元素

  7. :first-of-type第一个子元素

  8. :last-of-type最后一个子元素

  9. :nth-of-type

  10. :nth-last-of-type(){}从后往前数
    有些表单元素有enable和disable的状态,比如输入框、密码框、复选框等

  11. :enable可用的元素

  12. :disable不可用的元素

  13. :checked选择框的选中状态
    checkbox,radio的一些默认状态不可用属性进行改变,如边框颜色

  14. :read-only选中只读的元素

<input type ='text' readonly='readonly'/>
  1. :read-write选中非只读的元素
  2. 条件选择器
    E>F直接子元素(只能找儿子不能找孙子)
    E+F后面紧挨着的兄弟节点
    E~F后面的兄弟节点

5.css3的动画

形状变换

  1. transform可以实现元素的形状、角度、位置等的变化
  2. rotate()以XYZ为轴进行旋转,默认为Z
  3. rotateX(),rotateY(),rotateZ(),rotate3d(X,Y,Z,angle)
  4. scale()以X/Y轴进行缩放
  5. scale(x,y)接收两个参数,如果第二个未提供,则第二个参数使用第一个参数
  6. scalex(),scaley(),scalez()值是数字表示倍数,不加任何单位
  7. scale3d()->scale3d(sx,sy,sz)
  8. skew()对元素进行倾斜扭曲
  9. skew(x,y)接收两个值,第一个值对应X轴,第二个参数对应Y轴,如果第二个参数未提供,则默认值为0
  10. translate()可以移动距离相对于自身位置
  11. translatex()translatey()translatez()translate3d(x,y,z)
  12. transform-origin:关键字(left top)| 百分比 | 像素值
    变换原点,任何一个元素都有一个中心点,中心点是居中于元素x轴和y轴50%处

transition过渡动画

transition属性是css3的一个符合属性,包括以下子属性

  1. transition-property指定过渡或动态模拟的css属性
  2. transition-duration指定过渡所需要的时间
  3. 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多列布局

父元素上设置

  1. columns:[columns-width][columns-count]
  2. columns-width:指每一列的宽度,根据容器宽度自适应(最小宽度)
  3. columns-count:指规定的列数 唯一精确的是列数
  4. columns–gap属性规定列之间的间隔。
    在这里插入图片描述
  5. columns-rule不占任何空间位置,在列与列之间改变其宽度不会改变任何的位置
    在这里插入图片描述

弹性盒子display:flex

flex为复合属性,且必须配合父元素display:flex使用
部分css属性在flexbox盒子里面不起作用:float,clear,column,vertical-align
以下6个属性设置在子元素上

  1. flex-grow放大比例
    把剩余区域按照flex-grow的比例平均分配
  2. flex-shrink缩小比例
    多出盒子的部分,按照比例大小砍掉相应的大小,默认值是1
  3. flex-basis伸缩基准值,项目占据主轴的空间(超出后按比例计算)
    如果元素上同时出现了width和flex-basis那么flex-basis会覆盖width的值
  4. flex:是flex-grow,flex-shrink,flex-basis的简写
  5. order项目的排列顺序,从小到大进行排列
  6. 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最大缩放
媒体查询

  1. <link rel="stylesheet" media ="screen and (max-width:800px)" href =""xxx.css>
  2. @media(max-width:60px){div{}}
  3. @media screen and(max-width:800px) and (min-width:600px){...}