C3(一)

最新推荐文章于 2022-12-29 13:23:39 发布

pig-qr

最新推荐文章于 2022-12-29 13:23:39 发布

阅读量121

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43493493/article/details/103226753

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择器

属性选择器

E[attr]查找拥有attr属性的E标签
E[attr=value]查找attr属性而且属性值相等的E标签
E[attr*=value]查找attr属性里面包含value的任意位置
E[attr^=value]查找attr属性里包含value的开始位置
E[attr$=value]查找attr属性里包含value的结束位置

伪类选择器

1.a:hover a:link a:active a:visited
2.结构伪类
兄弟伪类
/+ 相邻的元素
~ 获取当前满足的兄弟元素
E:first-child E:first-of-type
E:last-child
E:nth-child(n):第n个子元素，计算E元素的全部兄弟元素
E:nth-last-child(n):倒序
E:nth-child(even)
E:nth-child(odd)
E:nth-of-type(n):指定类型
E:empty:选中没有任何子节点的E元素，注意，空格也算子元素
E:target

伪元素选择器

实现DOM元素的功能实际上不在文本中生成虚假的元素

1.是一个行内元素
display:block /position/float:""
2.要添加content，没有内容也要设置content:""
3.无法通过JS操作

盒模型：

非标准
a)padding + border + width = 盒子的宽度
b)padding + border + height = 盒子的高度

box-sizing
a)content-box:对象的实际宽度等于设置的width值和border、padding之和
b)border-box：对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置,允许负值
v-shadow	必需。垂直阴影的位置,允许负值
blur	可选,模糊距离
spread	可选。阴影的尺寸。值越大，阴影的扩散面积越大
color	可选。阴影的颜色
inset	可选。将外部阴影 (outset) 改为内部阴影

text-shadow

text-shadow:X-offset Y-offset blur color;

rgba hsla

rgba(255,255,255,Alpha)
hsla(360,100%,50%,Alpha)
使用rgba/hsla来控制颜色，相对opacity ，不具有继承性

边框图片

border-image-source
默认填充到容器的四个角点
border-image-slice: 10 fill;
边框向内剪裁10px
fill内部处理
.

渐变

线性渐变
background: linear-gradient();
0deg/to right/…

重复渐变加repeating
repeating-linear-gradient(150deg,
#fff 0%,#fff 10%,
#000 10%,#000 20%);

径向渐变
background: radial-gradient();
ellipse at center/px
circle

背景

background-sizing
cover
contain

background-repeat: round;
round会缩放在平铺
space会产生相等的间距值

background-attachment：fixed/scroll/local；

background-position:center/px;

background-origin

background-clip

过渡：

transition: property duration timing-function delay;
property:一定要给定一个具体的值

2D转换

transform:translate(x,y);
transform:scale(x,y);
transform:rotate(0deg);
transform:skew(xdeg,ydeg);倾斜
transform-origin: 允许你改变被转换元素的位置。默认中间

在这里插入图片描述用skew斜切可以做出3D效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
        *{
        	margin: 0;
        	padding: 0;
        }
        .pkbox{
        	height:219px;
        	width: 155px;
        	padding: 0;
        	position: relative;
        	margin:270px auto;
        }
		.pkbox > img{
           width: 100%;
           height: 100%;
           position: absolute;
           /*transform-origin: top right;*/
           transition: transform 2s;
		}
		
		/*.pkbox:hover > img:nth-of-type(1){
          transform: rotate(60deg) scale(0.7);
		}
		.pkbox:hover > img:nth-of-type(2){
          transform: rotate(150deg) scale(0.7);
		}
		.pkbox:hover > img:nth-of-type(3){
          transform: rotate(240deg) scale(0.7);
		}
		.pkbox:hover > img:nth-of-type(4){
          transform: rotate(330deg) scale(0.7);
		}*/
		.pkbox:hover > img:nth-of-type(1){
			transform: translate(-30px);
			z-index: 5;
		}
		.pkbox:hover > img:nth-of-type(2){
			transform: translate(-60px);
			z-index: 4;
		}
		.pkbox:hover > img:nth-of-type(3){
			transform: translate(-90px);
			z-index: 3;
		}
		.pkbox:hover > img:nth-of-type(4){
			transform: translate(-120px);
			z-index: 2;
		}
		.pkbox:hover > img:nth-of-type(5){
			z-index: 6;
		}
	</style>
</head>
<body>
<div class="pkbox">
	<img src="images/pk1.png">
	<img src="images/pk1.png">
	<img src="images/pk1.png">
	<img src="images/pk1.png">
	<img src="images/pk3.png">
</div>
</body>
</html>

在这里插入图片描述

pig-qr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C3(一)

选择器属性选择器E[attr]查找拥有attr属性的E标签E[attr=value]查找attr属性而且属性值相等的E标签E[attr*=value]查找attr属性里面包含value的任意位置E[attr^=value]查找attr属性里包含value的开始位置E[attr$=value]查找attr属性里包含value的结束位置伪类选择器1.a:hover a:link a:a...
复制链接

扫一扫