What’s new in css3

The new contents of css3 include: 1. Child selector, used to select elements with a specific parent element; 2. Sibling selector, used to select sibling elements immediately after another element; 3. Other sibling selectors; 4. Structural pseudo-class selectors; 5. Pseudo-element selectors, etc.

The operating environment of this article: windows7 system, css3 version, DELL G3 computer.

New content in CSS3:

##New content in CSS3 Selector
Child selector Child selector is used to select elements with a specific parent element

.box > p{
  background-color: pink}

Sibling selector Adjacent sibling selector: used to select sibling elements immediately following another element, and both have the same parent element

h1 + p{
  margin-top:50px;    满足h1相邻的p标签  }

Other sibling selectors Match all element2 elements after element1 in the same parent element. The two elements are the same parent element

h2 ~ p{
  background: ff0000;   和h2同级的其他选择器}

Structure pseudo-class selector nth-child(n) :n can be numbers, keywords and formulas
Common keywords even: even number, odd: odd number

SelectorFunctione:first-child Matches the first child element of the parent element ee: last-childmatches the last e element in the parent elemente:nth-child(n)matches the nth child in the parent element Element e##e:first-of-typee:last-of -typee of type e:last-of-type# of type e ##Pseudo element selector

Specifies the first element of type e
Specifies the last
Specifies the nth

Add a new pseudo element, the browser can recognize both single colon and double colon, and double colon is the h5 grammar specification Pseudo elements can only be added to double tags The attribute content:"";
must be written in the pseudo element. There cannot be a space before the colon of the pseudo element
before and after create an element, which is an inline element

SelectorFunction##e::beforein Insert an element before the E element Insert an element after the E element The first letter in the E container is selectedThe E container is selected The first line of text withinAttribute selector

	e::after
	e:first-letter
	e::first-line

 input[name]{  选择input中带有name属性的选择器    width:30px;
    height:30px;
  }
  input[type="checkbox"]{  选择input中type="checkbox"属性的选择器    width:30px;
    height:30px;
  }
  input[type^="check"]{  包含input中type="check"开头属性的选择器    width:30px;
    height:30px;
  }
  input[class&="check"]{  包含input中class="box"结尾属性的选择器    width:30px;
    height:30px;
  }
   input[class*="eck"]{  包含input中含有class="eck"属性的选择器    width:30px;
    height:30px;

New selector weight

The weight of pseudo-class selectors and attribute selectors is equal to the class selector

The weight of pseudo-element selectors is equal to the label selector CSS3 box model

css3 can be achieved through box-sizing Specify the box model so that we can set how to calculate the total width and total height of an element
content-box standard mode
The total size of the box is width padding border, and the content area is width and height Part
border-box weird mode
The box size is width and height, add padding and border, the content area will shrink
Border fillet border-radius Set the circle of the border Angular

border-radius: 100px/50px   分别设置水平方向和垂直方向半径border-bottom-right-radius: 50px; 单一属性设置右下角设置

text-shadow text shadow

The horizontal shadow, vertical shadow, blur distance and shadow color can be specified through attribute values

text-shadow text shadow The horizontal shadow, vertical shadow, blur distance and shadow color can be specified through the attribute value

Attribute valueFunctionh-shadowRequired, horizontal shadow positionRequired, vertical shadow positionBlur distanceShadow colorMulti-layer shadow: The first written shadow is overlaid on the later written shadow

	v-shadow
	blur
	color
	文字阴影：水平位置 垂直位置 模糊程度 颜色text-shadow: 10px 20px 5px #f00;

box-shadow box shadow

Used to add shadow to the box border

Attribute valueFunction##h-shadowRequired, horizontal shadow positionv-shadowRequired, vertical shadow positionblurBlur distance

##spread

Shadow size

color

Shadow color

inset

Outer shadow changed to inner shadow

边框阴影：水平位置 垂直位置 模糊程度 拓展大小 颜色 是否内边框阴影box-shadow: 20px 20px 5px 20px #f00 inset;

过渡属性transition
transition: 过渡属性 过渡时间 运动曲线 延时时间；

属性值	作用
transition	简写属性，用于在一个属性中设置其他4个过渡属性
transition-property	规定应用过渡的css属性的名称
transition-duration	定义过渡效果花费的时间，默认是0
transition-timing-function	规定过渡效果的时间曲线，默认是ease
transition-delay	规定过渡效果何时开始。默认是0

transition-property过渡的属性
none表示没有属性过渡
all表示所有变化的属性都过渡
属性名：使用具体的属性名，多个属性名之间逗号分隔
transition-timing-function 时间曲线

.box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transition: all 2s linear 0s;     过渡属性的使用（动画效果）  }
  .box:hover{
    width: 500px;
  }

2D转换-transform
移动translate()
作用：对元素进行移动、缩放、转动、拉长、拉伸，配合过渡效果实现动画效果

transform: translate(10px,10px);

缩放scale()
transform的属性值为scale()可以实现缩放效果
scale为1以上为放大效果，为0到1之间缩放

旋转rotate()
实现元素旋转
元素旋转后，坐标轴也会发生改变
正数表示顺时针旋转，负数表示逆时针旋转

transform: rotate(30deg);

倾斜skew()
设置skew()，实现元素倾斜
书写语法：transform:skew(数字deg,数字deg);
transform-origin 属性
设置调整元素的水平和垂直方向原点位置，调整元素基准点
x:定义X轴的原点，可能的值：left、center、right、像素值、百分比
y:定义y轴的原点，可能的值：left、center、right、像素值、百分比

transform-origin: left top;   以左上角为基准点

3D转换
透视perspective
透视可以将一个2D平面在转换过程中呈现3D效果
作用：设置在Z轴的视线焦点的观察位置，从而实现3D效果
属性值：像素值，数值越大，观察点距离z轴原点越远
3D旋转

3D位移
加粗样式属性值为像素或者百分比

transform-style属性
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
属性值：flat:所有子元素在2D平面呈现，preserve-3d:保留3D空间

transform-style: preserve-3d;

浏览器兼容
internet Explorer10、Firefox以及Opera支持transform属性
Chrome 和 Safari需要前缀-webkit-
internet Explorer9 需要前缀-ms-

动画
css3中提供了自己的动画制作方法
css3动画制作分为两步，创建动画、制作动画

animation属性
需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果
animation属性用于对动画进行捆绑
语法：animation:动画名称 过渡时间 速度曲线 动画次数 延时时间

小球运动动画代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 200px auto;
      background-color: skyblue;
      /* 添加绑定动画 */
      animation: move1 2s linear infinite;
    }
    /* 开头和结尾定义动画效果 */
    @keyframes move{
      from{
        transform: translateY(0);
      }
      to{
        transform: translateY(150px);
      }
    }
    @keyframes move1{
      0%{
        transform: translateY(0);
      }
      25%{
        transform: translateY(200px);
      }
      50%{
        transform: translateY(0);
      }
      75%{
        transform: translateY(-200px);
      }
      100%{
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <p class="box">
  </p>
</body>
</html>

               

The above is the detailed content of What’s new in css3. For more information, please follow other related articles on the PHP Chinese website!