Css3的一些归纳属性选择器伪类阴影背景渐变过渡 2D效果

冷不防 2021-09-18 12:12 180阅读 0赞

## **CSS属性选择器** ##

\[\]：属性选择器

开头匹配    ^=

1a[href ^= "page2"] {
    2	color: green;
    }
    	<p>
    		<a href="page2/1.html">page2/1.html</a>
    	</p>

结尾匹配    $=

<p>
    		<a href="page2/1.html">page2/1.html</a>
    	</p>
    
    /*结尾匹配*/
    	a[href $= "page2"] {
    		color: green;
    	}

任意匹配    \*=

<p>
    		<a href="page2/1.html">page2/1.html</a>
    	</p>
    
    
    /*任意匹配*/
    	a[href *= "page2"] {
    		color: blue;
    		font-weight: bold;
    	}

1.  html5可以自定义属性，必须用data-开头
2.  短横匹配： |= 
3.  分组匹配： ~=

## **儿子序选择器** ##

选中某个元素所有儿子中的老几。关注的是所有儿子中的整体排名

:first-child  第一个儿子

:last-child  最后一个儿子

:nth-child(n) 第n儿子

:nth-child(an + b) 连续多个

:nth-last-child(n)   表示倒数n个

## **儿子类型序选择器** ##

选中某个元素所有同种标签类型儿子中的老几。关注的是同种标签中儿子的排名情况

:first-of-type  同种标签中的第一个儿子

:last-of-type  同种标签中的最后一个儿子

:nth-of-type(n) 同种标签中的第n儿子

:nth-of-type(an + b) 同种标签中的连续多个

:nth-last-of-type(n) 同种标签中的表示倒数n个

# #

## **儿子序选择器**与**儿子类型序选择器的区别在于一个只控制单个标签一个控制某个元素多个同种标签** ##

## **关系节点选择器** ##

div p \{\}

> :子级选择器   只能选中儿子节点不能选中其他后代元素

\+： 后面第一个亲兄弟

~： 后面所有的亲兄弟

/*> 只能选中儿子节点*/
    	.box > p {
    		color: red;
    	}
    
    	/*+ 后面第一个亲兄弟*/
    	h3 + p {
    		color: green;
    		font-weight: bold;
    	}
    	/*~ 后面所有的亲兄弟*/
    	h3 ~ p {
    		color: blue;
    	}

## **伪类** ##

1.**hover任何都具有**

:hover 鼠标悬停伪类

2**表单伪类**

:checked 被选中伪类    表示标签被选中改变样式

:focus   获取焦点伪类   常用在复选框中

input:focus {
    		/*外轮廓*/
    		outline: none;
    		border: 1px solid red;
    	}

:disabled 不可用表单伪类   变灰色

:enabled  可用表单伪类   可用可以写可以不写

**节点伪类**

:only-child  选中元素必须是某一个元素唯一的子节点

:empty   空节点伪类

## **伪元素** ##

**：：before** 在原有内容之前增加  常用在清楚浮动

必须设置content：属性值书写要增加的内容

行内元素

：：**after**在原有内容之后增加

必须设置content属性，行内元素

应用：清除浮动
    
             ::after{
    
               content:" ";
    
                 display:block;
    
                  clear:both;
    
        }
        或者在文字加入小圆点改变颜色都可以使用
          box ul li a::before {
    2	/*必须设置content*/
    3	content: "";
    4	/*行内元素 不能设置宽高
    5	1小圆点设置宽高
    6	2位置便于调整
    7	定位   
    8	*/
    9	position: absolute;
    10	left: 10px;
    11	top: 20px;
    12	width: 10px;
    13	height: 10px;
    14	border-radius: 50%;
    15	background-color: #eee;
    16}
    17   .box ul li a:hover {
    18	color: orange;
    19}
    20   .box ul li a:hover::before {
    21	background-color: orange;
    }
      <div class="box">
    		<ul>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    			<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
    		</ul>
    	</div>

## **其他伪元素** ##

::first-letter 首个汉字

::first-line  首行文字

::selection   鼠标选中效果

**圆角**

border-radius

/\*半圆：有些边不设置圆角极限可以是短边全部\*/

半圆设置的方法

border-radius: 200px 200px 0 0;

还可以这样设置

1.  border-top-left-radius:
2.  border-top-right-radius:
3.  border-bottom-left-radius:
4.  border-bottom-right-radius:

# #

## **盒子阴影     **  ##

**        **

右偏移量

下偏移量

模糊半径

延伸量（省略）

颜色

内阴影：inset

文字阴影/*没有内阴影和延伸量*/
    		text-shadow: 0 0 0px rgba(255,0,0,.5);

box-shadow: 5px 10px 10px 10px rgba(0,0,0,.5);

一个元素可以同时设置多个阴影，用逗号隔开

/*多个阴影使用逗号隔开*/
    3		box-shadow: 0 0 5px rgba(255,0,0,.9),
    4	
    5					5px 5px 5px rgba(0,255,0,.5);6	}

内阴影

1	.no3 {
    2		box-shadow: inset 5px 5px 5px rgba(255,255,0,.5);3	}

## **背景** ##

**      **

background-origin: content-box; 从内容盒左上角开始渲染

背景位置：表示相对于背景起源位置进行偏移   实现垂直居中的效果 一般结合background-position使用

.box {
    		width: 300px;
    		height: 300px;
    		padding: 50px;
    		border: 50px solid #000;
    		background-image: url(images/baby.png);
    		background-repeat: no-repeat;
    		/*内容盒width*height*/
    		background-origin: content-box;
    		color: red;
    		background-position: 0 0;
    	}

background-clip: content-box;  背景裁切 表示将其他区域背景图裁切掉，只剩下内容盒区域的背景

.box2 {
    		width: 300px;
    		height: 300px;
    		padding: 50px;
    		border: 50px solid #000;
    		background-image: url(images/baby.png);
    		background-clip: content-box;
    	}

background-size:宽  高； 背景尺寸

可以使用px   培训根据本身盒子的宽 高   border  magin padding 来判断背景尺寸大小

也可以使用百分比来做

background-size: cover; 1背景图不变形  2大背景区域一定不会留白   3背景图有可能显示不完整 cover(覆盖，尽可能大)

.box6 {
    		width: 300px;
    		height: 400px;
    		padding: 50px;
    		border: 50px solid #000;
    		color: red;
    		background-image: url(images/baby.png);
    		background-repeat: no-repeat;
    		/*大背景区域4:5  背景图1:1*/
    		background-size: cover;
    	}
    
    不留白占整个盒子但是图片会变形

background-size: contain  1背景图不变形  2背景图一定显示完整     3大背景区域可能会有留白 contain(容纳，显示全部)

.box7 {
    		width: 300px;
    		height: 400px;
    		padding: 50px;
    		border: 50px solid #000;
    		color: red;
    		background-image: url(images/baby.png);
    		background-repeat: no-repeat;
    		/*大背景区域4:5  背景图1:1*/
    		background-size: contain;
    	}
    
    图片完整但是可能会留白

background-position  背景定位

background-repeat: no-repeat;  是否平铺 不平铺

background-attachment: 卷动

当遇到精灵图是想要加载背景图片的时候可以给父盒子限制高 子盒子宽高减半 设置margin-top 位置减半 背景

## **渐变背景    通过background-image获取** ##

background-image: -webkit-linear-gradient(渐变开始方向，渐变颜色，渐变颜色)

## **不同的浏览器有兼容性   Chrome和****safari       -webkit-** ##

##                                          firefox                 -moz- ##

##                                           ie                      -ms- ##

##                                          opera                -o- ##

第一个参数：渐变开始方向

其他参数：渐变颜色，可以书写多个，用逗号隔开

颜色后面可以用空格隔开一个百分数，表示该颜色在整体渐变中出现的位置

1	.box1 {
    2		width: 200px;
    3		height: 200px;
    4		border: 1px solid #000;
    5		background-image: -webkit-linear-gradient(top,red,green);
    6		background-image: -moz-linear-gradient(top,red,green);
    7		background-image: -ms-linear-gradient(top,red,green);
    8		background-image: -o-linear-gradient(top,red,green);
    9		background-image: linear-gradient(top,red,green);10	}

多背景

一个元素可以渲染多个背景用逗号隔开，其他单一属性也是用逗号隔开，一一对应背景图

background: url(images/baby.png) content-box,
    					url(images/xiaoming.png);
    		/*单一属性也是逗号隔开*/
    		background-repeat: no-repeat, no-repeat;
    		background-size: 100px 100px,cover;

## **过渡效果** ##

**                ** **transition: 过渡属性 （all） ** **过渡完成时间(S)   ****  缓冲描述 (linear 匀速     ease非匀速 )  ** **延迟时间;(如果是0秒也必须设置单位)**

**              cubic-bezier    贝塞尔曲线 非匀速**

**             干蹦效果   直接加 :hover**

transition-property:过渡属性

transition-duration:过渡时间

transition-timing-function:缓冲描述

transition-delay:延迟时间

/*过渡
    8		第一个参数：参与过渡属性 all
    9		二：时间，单位是s
    10		三：缓冲描述 linear匀速   ease非匀速 贝塞尔曲线
    11		四：延迟时间，单位是s,如果是0s也必须设置单位
    12		*/
    13		/*transition: width 1s linear 0s;*/
    14		transition: all 1s linear 0s;
    15		transition: all 1s cubic-bezier(0.14, 1.1, 0.82, -0.04) 0s;
    16	}

**实例 渐变背景按钮按钮**

**   **

.btn {
    		/*行内元素*/
    		display: block;
    		width: 250px;
    		height: 60px;
    		border: 1px solid #000;
    		margin: 50px auto;
    		border-radius: 5px;
    		/*先设置背景图在设置渐变*/
    		background-image: url(images/paopao.png), -webkit-linear-gradient(top,#67BCFD,#1979C4);
    		text-align: center;
    		line-height: 60px;
    		font-size: 30px;
    		color: #fff;
    		/*过渡*/
    		transition: all 1s linear 3s;
    	}
    /*background-position可以参与过渡*/
    	.btn:hover {
    		background-position: right bottom;
    	}

**展示效果**

![2019031620281069.png][]

# #

## **2D变形** ##

## **             transform: 变形** ##

## **             旋转transform:rotate(数值deg);正方向顺时针** ##

.box:hover img {
    		/*旋转*/
    		/*一周360deg 可以超过*/
    		/*transform: rotate(400deg);*/
    	}

## **             缩放 transform:scale(1)      0-1缩小           1-无穷  变大** ##

.box2:hover img {
    		/*缩小0-1*/
    		transform: scale(0.5);
    		/*放大1-*/
    		transform: scale(1.6);
    	}

## **            案列** ##

**                               **

.box2 {
    		width: 200px;
    		height: 200px;
    		background-color: lightblue;
    		/*border-radius: 50%;*/
    		border: 1px solid #000;
    		overflow: hidden;
    	}
    	.box2 img {
    		/*一个元素可以有多个变形 用空格隔开*/
    		display: block;
    		transform: rotate(30deg) scale(1.3);
    		transition: all 1s linear 0s;
    	}
    	.box2:hover img {
    		/*没有变形*/
    		transform: none;
    	}

# #

## **     斜切  transform:skew(水平deg，垂直deg)** ##

.box3:hover img {
    		/*斜切（水平，垂直）*/
    		transform: skew(50deg,0);
    		transform: skew(0deg,50deg);
    	}

## **             空间移动 transform:translate(水平px，垂直 px)  原位置 标准流** ##

**                  脱离标准流的  浮动  定位 绝对定位  相对定位    transform:translate是标准流**

应用：绝对定位水平居中

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td style="width:521.1pt;"> 
    <ol> 
     <li>left: 50%;</li> 
     <li>transform: translateX(-50%); //拉回自身占有宽度一半</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## **            **  ##

[2019031620281069.png]: /images/20210812/db8dc0d0c84c4891aea08b450eae6aa4.png