CSS3

Posted 2020-08-04 程序猿1990

浏览器厂商在实现CSS3的效果时,有的还有的还在测试阶段,为了保证显示效果,我们在使用某些属性的时候需要添加额外的前缀

举个例子:我要使用属性xxx

-ms-xxx:ie浏览器

-moz-xxx:FireFox浏览器

-o-xxx:Opera浏览器

-webkit-xxx:Chrome以及Safari

Trident内核(IE)： 前缀为 -ms
Gecko内核(FireFox)： 前缀为 -moz
Presto内核(Opera)： 前缀为 -o
Webkit内核(Chrome,Safari)： 前缀为 -webkit

兄弟选择器

在class为.first之后的所有class为.meat的元素背景颜色会变为红色 需要注意的是,之前的并不会获取到哦

属性选择器

E[att]:包含attr属性
    E[att="val"]:属性值为val
    E[att~="val"]:属性值使用空格进行分割,有一个为val
    E[att^="val"]:属性值以val开头
    E[att$="val"]:属性值以val结尾
    E[att*="val"]:属性中包含val
    E[att|="val"]:属性以‘-’分割，其中有val值（如果属性只有val 那么也会被选中哦）

伪类选择器

标签E,必须是某个元素的子元素(在界面上)

如果通过伪类选择器找到的元素不是E则选择无效 ``` 结构伪类 E:first-child：第一个子元素 E:last-child：最后一个子元素

E:nth-child(n)： 第n个子元素，索引的计算方法是E元素的全部兄弟元素； E:nth-last-child(n)： 跟E:nth-child(n)类似 ，只是倒着计算； 其中n的取值范围是：0，1,2,3,4...线性累加 可以传入表达式，比如2n,2n+1等等 可以传入特殊字符：even(偶数) odd(奇数)

E:empty 指的是E标签，并且内容为空 E:not(选择器)：指的是，不满足括号内选择器条件的元素E

目标伪类 E:target:选中当前锚点

 

伪类选择器before，after

需要配合content属性使用（没有则无法显示）

可以用来制作图标

部分图标框架使用的就是这种机制

默认是行内元素，根据需求可能需要定位，子绝父相

E:before：在元素E之前添加
E:after：在元素E末尾添加

也可以写为
E::before
E::after

first-letter

获取内容的第一个字，可以设置首字母下沉效果

E::first-letter

first-line

获取第一行内容

E::first-line

selection

选中时的样式

只能设置的属性有background-color,color,text-shadow

E::selection

placeholder

设置input标签placeholder属性的显示颜色

E::selection

 

边框圆角border-radius

赋值的方法类似于margin，border-radius（左上，右上，右下，左下）

 

颜色

rgba（0-255,0-255,0-255,0-1）

hsla（色调0-360，饱和度0-100%，亮度0-100%，透明度0-1）

 

边框阴影

box-shadow

• h-shadow:必需。水平阴影的位置。允许负值。
• v-shadow:必需。垂直阴影的位置。允许负值。
• blur:可选。模糊距离。
• spread:可选。阴影的尺寸
• color:可选。阴影的颜色。请参阅 CSS 颜色值。
• inset:可选。将外部阴影 (outset) 改为内部阴影。

 

字体阴影

 text-shadow

赋值方法_3个值:

例5px 5px red

x偏移值  y偏移值  阴影颜色

赋值多个阴影

5px 5px red,10px 10px yellow;是以逗号隔开

制作3D字体

左上角是暗色，右下角是亮色    做凹字体

左上角是亮色，右下角是暗色    做凸字体