CSS3中新特性样式篇

一、CSS3中新特性样式篇

1.1 背景

1.1.1

background-origin: 规定背景图片的定位区域。

padding-box: 背景图像相对内边距定位(默认值)

border-box:背景图像相对边框定位【以边框左上角为参照进行位置设置】

content-box :背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

备注:默认盒子的背景图片是在盒子的内边距左上角对齐设置


1.1.2

background-clip: 规定背景的绘制区域。

border-box 背景被裁切到边框盒子位置
【将背景图片在整个容器中显示】

padding-box 背景被裁切到内边距区域【将背景图片在内边距区域(包含内容区域)显示】

content-box 背景被裁切到内容区域【将背景图片在内容区域显示】


1.1.3

background-size:规定背景图片的尺寸。


1.2

box-shadow: 盒子阴影

border-radius: 边框圆角

border-image: 边框图片

border-image-source: url(“2.png”); //设置边框图片 border-image-slice: 20; //边框图片裁切 : 不需要带单位

border-image-repeat: stretch | round | repeat; //设置边框图片的平铺方式 border-image-width: 20px;


1.3

文本 text-shadow: 设置文本阴影


二、CSS3新特性之选择器篇

2.1

属性选择器: [属性名=值] {} [属性名] {} 匹配对应的属性即可 [属性名^=值] {} 以值开头 [属性名*=值] {} 包含 [属性名$=值] {} 以值结束

2.2

结构伪类选择器: :first-child {}

选中父元素中第一个子元素 :last-child {}

选中父元素中最后一个子元素 :nth-child(n)

{}选中父元素中正数第n个子元素:nth-last-child(n)

{} 选中父元素中倒数第n个子元素 1 2 3 4 备注;n 的取值大于等于0l可以设置预定义的值;可以是一个表达式(an+b的格式) odd[选中奇数位置的元素] even【选中偶数位置的元素】

2.3

其他选择器: :target

被锚链接指向的时候会触发该选择器 ::selection

当被鼠标选中的时候的样式 ::first-line

选中第一行 ::first-letter 选中第一个字符 1 2 3 4

三、CSS3新特性之颜色渐变

3.1

线性渐变: 开始颜色和结束颜色 渐变的方向 渐变的范围 background-image: linear-gradient(to right, red, blue); 1

表示方向:
to + right | top | bottom | left 通过角度表示一个方向: 0deg [从下向上渐变] ; 90deg【从左向右】

3.2

径向渐变: background-image: radial-gradient(100px at center, red, blue);

四、2D转换

4.1

位移 transform: translate(100px,100px); 1 备注:位移是相对元素自身的位置发生位置改变

4.2

旋转 transform: rotate(60deg); 1 备注:取值为角度

4.3

缩放 transform: scale(0.5,1); 1 备注:取值为倍数关系,缩小大于0小于1,放大设置大于1

4.4

倾斜 transform: skew(30deg,30deg); 1 备注:第一个值代表沿着x轴方向倾斜,第二个值代表沿着y轴方向倾斜

五、 3D转换

5.1

位移

transform:

translateX()

translateY()

translateZ()

5.2

旋转

transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

5.3

缩放

transform:

scaleX(0.5)

scaleY(1)

scaleZ(1);

5.4

倾斜

transform:

skewX(30deg)

skewY();

5.5

将平面图形转换为立体图形

transform-style:preserve-3d; 1

六、CSS3新特性之动画篇

6.1

过渡

transition-property: all;

//设置哪些属性要参与到过渡动画效果中: all

transition-duration: 1s; //设置过渡执行时间 transition-delay: 1s; //设置过渡延时执行时间

transition-timing-function: linear; //设置过渡的速度类型 1 2 3 4 6.2 动画 /* 1定义动画集 / @keyframes rotate { / 定义开始状态 0%/ from { transform: rotateZ(0deg); } / 结束状态 100%*/ to { transform: rotateZ(360deg); } } 1 注意:如果设置动画集使用的是百分比,那么记住百分比是相对整个动画执行时间的。

七、CSS3新特性之网页布局篇

伸缩布局或者弹性布局【响应式布局】

7.1

设置父元素为伸缩盒子【直接父元素】

display: flex 1

为什么在伸缩盒子中,子元素会在一行上显示?

子元素是按照伸缩盒子中主轴方向显示

只有伸缩盒子才有主轴和侧轴

主轴: 默认水平从左向右显示

侧轴: 始终要垂直于主轴

7.1.1

设置伸缩盒子主轴方向(flex-direction)

flex-direction: row; 【默认值】

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

7.1.2

设置元素在主轴的对齐方式( justify-content)

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

7.1.3

设置元素在侧轴的对齐方式 (align-items)

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch; /* 默认值 */

7.1.4

设置元素是否换行显示(flex-wrap)

在伸缩盒子中所有的元素默认都会在一行上显示,如果希望换行

flex-wrap: wrap | nowrap;

7.1.5

设置元素换行后的对齐方式( align-content)

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值