css3都有哪些新内容

css3新内容有：1、子选择器，用于选取带有特定父元素的元素；2、兄弟选择器，用于选择紧接在另一个元素后的兄弟元素；3、其他兄弟选中器；4、结构伪类选择器；5、伪元素选择器等等。

子级选择器用于选取带有特定父元素的元素

.box > p{
  background-color: pink}

兄弟选择器
相邻兄弟选择器：用于选择紧接在另一个元素后的兄弟元素，而且两者都有相同的父元素

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

其他兄弟选中器
匹配同一个父元素中在element1后面的所有element2元素,两种元素为相同的父元素

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

结构伪类选择器
nth-child(n)：n可以是数字、关键字和公式
常见的关键字even:偶数、odd:奇数

伪元素选择器
新增伪元素,浏览器对单冒号和双冒号都能识别，双冒号是h5语法规范
伪元素只能给双标签添加
伪元素里面必须写上属性content:"";
伪元素的冒号前不能有空格
before和after创建一个元素，属于行内元素

属性选择器

 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;

新增选择器权重
伪类选择器、属性选择器的权重等于类选择器
伪元素选择器的权重等于标签选择器
CSS3盒模型
css3可以通过box-sizing来指定盒模型，这样我们可以设置如何计算一个元素的总宽度和总高度
content-box标准模式
盒子的总大小为width+padding+border，内容区域是width和height部分
border-box怪异模式
盒子大小为width和height,添加padding和border，内容区域会收缩
边框圆角border-radius
设置边框的圆角

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

text-shadow文字阴影
通过属性值能够规定水平阴影、垂直阴影、模糊距离以及阴影的颜色
text-shadow文字阴影
通过属性值能够规定水平阴影、垂直阴影、模糊距离以及阴影的颜色

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

多层阴影： 先写的压盖在后写的阴影上

box-shadow盒子阴影
用于对盒子边框添加阴影

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

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

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()
作用：对元素进行移动、缩放、转动、拉长、拉伸，配合过渡效果实现动画效果
语法：animation:动画名称 过渡时间 速度曲线 动画次数 延时时间

小球运动动画代码

以上就是css3都有哪些新内容的详细内容，更多请关注其它相关文章！