C3

2018-12-04  本文已影响0人  海子小夜曲

属性选择器

a[href="a.mp3"]

E[attr=val]选中的是attr的值完全等于val的元素

E[attr^=val]选中的是attr的值以val开头的元素

E[attr$=val]选中的是attr的值以val结尾的元素

E[attr*=val]选中的是attr的值含有val且在任意位置 的

E[attr]选中的是含有attr属性的元素

伪类选择器 li:firlst-child

伪元素选择器  div:before  div::after

超出宽度显示省略号

white-space:nowrap

overflow:hidden;

text-overflow:ellipsis;

rgba()  也是C3属性

text-shadow

水平位移 值越大 越往右

垂直位移 值越大 越往下

模糊程度 值从0开始 值越大越模糊

颜色      用常用颜色表示方式

text-shadow:10px 10px 50px red;

box-shadow

水平位移

垂直位移

模糊程度

扩展半径

颜色

是否是内阴影

 box-sizing 

content-box 盒子的尺寸=css中的尺寸+padding+border

border-box  盒子的尺寸=css中的尺寸=padding+border+可变的尺寸

边框

边框半径

border-radius: 上右下左

也可以这么写

border-radius:x x x x/y y y y

圆形 50%

边框图片

border-image-source:url()

border-image-slice:27px27px27px27px;

border-image-repeat:round;

背景尺寸background-size(背景尺寸的设置)

1数字

2,百分比

3,cover 完全覆盖元素,不考虑图片内容是否损失

4,contain 完全显示图片,但是不考虑元素是否被完全覆盖

background-cover

图片作为背景 不会在div中出现留白

backgound-size:contain

无论什么情况,照片都完全显示,但是不考虑元素是否被完全覆盖

背景原点

background-origin (精灵图,移动端导航 )

属性值 border-box padding-box content-box

默认值是padding-box

重新规定了background-position的基准点

背景剪裁 

background-clip

属性值 border-box padding-box conten-box

默认值是 border-box

规定了背景图片的显示区域

自定义动画

过度属性 tansform  transition 

上一篇下一篇

猜你喜欢

热点阅读