css3新增属性
css3
版权声明：本文为博主原创文章，未经博主允许不得转载。
一、选择器(新增)
- 层级选择器
> 儿子元素
(空格) 后代元素
区别: 主要就是使用你爷爷选择器能否找到孙子选择器的区别
+ 紧跟着的兄弟元素
必须是紧跟着的兄弟元素 如果不是 不会被选中
~ 后面的兄弟元素
必须是我们后面的元素 如果是前面的不行
- 属性选择器
E[name] E 选择器 name 代表属性名
必须包含属性
E[name]
指定属性指定值
E[name=”hello”]
必须是自己一个属性值
指定属性包含指定值
E[foo~=’bar’]
指定属性以指定值开头
E[foo^=’bar’]
指定属性以指定值结尾
E[foo $=’bar’]
指定属性的值包含指定字段
E[foo *=’bar’]
- 伪选择器
:link
:hover
:active
:visited
:first-child 第一个孩子
:last-child 最后一个孩 老幺 老嘎达
:nth-child(num) 某个孩
: first-of -type 兄弟第一人
:last-of-type 兄弟最后一人
:nth-of-type(num) 兄弟某个人
区别: 你是否是在第一个标签位置上 如果是那么first-child 和first-of-type 选中的就是一个内容 否则不是
:empty 找到内容为空的属性
二、 单位
rgba rgba(255,255,255,0.5) a代表透明度 0-1
hsl H：hue(色调) 0 -360 0和360表示红色 120 表示绿色 240 表示蓝色 其他的数值就是指定颜色 取值 0-360
S: saturation饱和度 取值为0.0% -100.0% -0 灰色 100 全彩色
L： lightness亮度 取值范围 0.0% -100.0% 0 黑色 100 白色
hsla a代表透明度 0-1
opacity 透明度 默认值1 取值 0-1
五、表框属性
border -color
border-width
border-style
border-radius 圆弧
1.一个值四个角
2.二个值 第一个 左上 右下 第二个 右上 左下
3.三个值 第一个 左上 第二个 右上 左下 第三个 右下
4.四个值 左上 右上 右下 左下
border-shadow 阴影
box-shadow
第一个参数 必须写 水平阴影位置 可以负数
第二个参数 必须写 垂直阴影位置 可以负数
第三个参数 可选 模糊距离
第四个参数 可选 阴影颜色
第五个参数 可选 阴影位置 inset
六、背景属性
background -size 背景图片大小调整
background-size :100px 100px;
background-size:100% 100%
background-size :cover 等比例缩放 超出部分不显示
background-size:contain等比例缩放 缺少的白色填充
文本属性
text-overflow
ellipsis 显示省略号
white-space: nowrap 不换行
text-shadow 文本阴影
第一个参数 必须写 水平偏移值 可以是负数
第二个参数 必须写 垂直偏移值 可以是负数
第三个参数 可选 模糊距离
第四个参数 可选 颜色
总结：
嘛嘛嘛，还有很多没介绍比如最重要的动画效果，我就不一一介绍了，手册有，这个介绍自己不动手也没有用，我发一个案例吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试网页css3动画</title> <style type="text/css"> *{ color: #eeeeee; margin: 0; padding:0px;} .a{ width: 200px;height: 30px; line-height:30px;background: blue;} .b{ width: 200px;height: 30px; line-height: 30px;background:blue;} .c{ margin: 50px 0 0 50px; width: 200px;height: 30px; position: relative;} .d{ width: 200px;height: 30px; z-index: 100; background: #fff; position:absolute; top:30px;} .c:hover .b{display: block; background: red;transform:rotate(720deg);transition:transform 3s;} .c:hover .d{ display: none;} .c:hover .e{transform:translate(900px,0px);transition:transform 3s;} .e{ display: block; position: absolute; left: -900px;} </style> </head> <body> <div class="c"> <div class="a">你好！</div> <div class="b">看到了我要捅死你！！！</div> <div class="d"></div> <img class="e" src="1.jpg"><!-- 自己找一个图片 --> </div> </body> </html>
css3的内容大多数新加的属性可以节省我们写很多的JavaScript，但是注意并不是所以得浏览器支持，手机端可以全部用css3写，但是pc端还是要注意兼容性，不兼容还是要写JavaScript哦
