CSS3 新特性

2019年5月12日 248次阅读 来源: 顡er

几行简单的 CSS 代码便可实现一系列令人眼前一亮的效果，比用 JavaScript 去模拟这样的效果要好得多，不仅降低了复杂度，变得易维护，在性能上也突飞猛进了

选择器

  1. 定位到div下的第4个标签为span的元素。

    body>.main div span[4] {
    /*props: values;*/
}

  2. 定位到元素集的奇数或偶数索引 tr:nth-child(odd||even)

  3. 非选择器 :not(E)

  4. 第一个、最后一个子元素E:first-child E:last-child

  5. 其他选择器

E:nth-last-child(n) 
E:nth-of-type(n) 
E:nth-last-of-type(n) 
E:last-child 
E:first-of-type 
E:only-child 
E:only-of-type 
E:empty 
E:checked 
E:enabled 
E:disabled 
E::selection 
E:not(s)

文字特效

@Font-face

<!--声明-->
@font-face { 
    font-family: newFont; 
    src:url(BORDERW0.eot); 
} 
<!--引用-->
.border { 
     font-size: 35px;
     color: black; 
     font-famlily: "newFont";
 }

word-wrap & text-overflow & 文字效果

p {
   word-wrap: break-word;
   text-overflow: clip || ellipsis;
}
<!--文字效果-->
div {
   -webkit-text-fill-color: black; 
   -webkit-text-stroke-color: red; 
   -webkit-text-stroke-width: 2.75px; 
}

  Text-fill-color: 文字内部填充颜色
  Text-stroke-color: 文字边界填充颜色
  Text-stroke-width: 文字边界宽度

![QA0[E$P$PW[JP5S]U58I26.png

![N@ZAV@%@1TY_6GY}H6$SPG.png

《CSS3 新特性》 OYHWNV[{)5)GT(%MM]K38{0.png

多列布局（multi-column layout）

Column-count：2; //布局几列。
Column-rule：1px #999 solid; //列与列之间的间隔条的样式
Column-gap：4px; //列于列之间的间隔

《CSS3 新特性》 0TECERTCOKA)(W%V9I{_0%M.png

边框和颜色（color, border）

  1. 颜色透明的属性值 background-color: rgba(r,g,b,a)
  2. HSL(色调，饱和度，亮度)的透明度 color: hsla( length, percentage, percentage, a)
  3. 圆角 border-radius: 15px\20px; (方位和参数个数类似padding和margin)

渐变效果（Gradient）

  1. 线性渐变

gradient(linear,0% 0%,100% 0%,from(#2A8BBE), [color-stop(0.33,green),]to(#FE280E))
color-stop 相当于颜色拐点

.linear-gradient {
            height: 50px;
            width: 400px;
            background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(white), color-stop(0.33,green),to(#FE0000));
        }

<center>
《CSS3 新特性》 V4L{65S39KB~)60TWWDWH`M.png

</center>

  1. 径向渐变（由外到内的渐变）
    前三个数值是起始圆的圆心坐标和半径
    后三个是结束色彩代表圆的圆心坐标和半径
    color-stop(0.5,red)是断点的位置和色彩
background-image: -webkit-gradient(radial, 50 50, 50, 50 50, 0, from(black), color-stop(0.5, red), to(blue));

<center>![6Q$X59D~QLTQV@{UB6P525.png</center>

漫射光效果
改变坐标点位置即可实现

backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

<center>![H$([VHLQC)47L1NVY887B9.png</center>

阴影（Shadow）和反射（Reflect）

.class1{ 
    text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
} 
.class2{ 
    box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
}

第一个参数：X轴方向阴影偏移量
第二个参数：Y轴方向阴影偏移量
第三个参数：阴影模糊半径
第四个参数：阴影颜色为
其中偏移量可以为负值，负值则反方向
![KX~$HTXGO(NN6N8HERXB]$T.png](http://upload-images.jianshu.io/upload_images/1951576-9d90f5ac210a3e31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.class3 { 
    <!--反射和渐变-->
    -webkit-box-reflect: below 10px 
    -webkit-gradient(linear, left top, left bottom, from(transparent),to(rgba(255, 255, 255, 0.51))); 
 }

《CSS3 新特性》 W7K0~MGYQJ8UFCX}7@T(`0R.png

背景效果

css2的五个与背景相关的属性。
background-color:完全填充背景的颜色
background-image:用作背景的图片
background-position:确定背景图片的位置
background-repeat:确定背景图片是否重复铺平
background-attachment:确定背景图片是否随页面滚动

“background-clip” 背景画区

  • background-clip: border-box; 背景从 border 开始显示 ;
  • background-clip: padding-box; 背景从 padding 开始显示 ;
  • background-clip: content-box; 背景显 content 区域开始显示 ;
  • background-clip: no-clip; 默认属性，等同于 border-box;
    通常情况，背景都是覆盖整个元素的,CSS3可以设置是否一定要这样做。这里可以设定背景颜色或图片的覆盖范围。

“background-position” 背景的位置，

通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。

  • background-origin: border-box; 从 border. 开始计算 background-position;
  • background-origin: padding-box; 从 padding. 开始计算 background-position;
  • background-origin: content-box; 从 content. 开始计算 background-position;

“background-size” 背景图片的大小

注意别和 clip 弄混，这个主要用于设定图片本身

  • background-size: contain; 缩小图片以适合元素（维持像素长宽比）
  • background-size: cover; 扩展元素以填补元素（维持像素长宽比）
  • background-size: 100px 100px; 缩小图片至指定的大小 .
  • background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸 .

“background-break”

元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

  • background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一样）
  • background-break: bounding-box; 把盒之间的距离计算在内；
  • background-break: each-box; 为每个盒子单独重绘背景。
    这种属性可以设定复杂元素的背景属性。

效果图待确认
<center>

《CSS3 新特性》

</center>

<center>

《CSS3 新特性》

</center>

多背景图片

.bg {
    width: 100px;
    height: 100px;
    background: url("image/close-hover.png") 10px 50px no-repeat, url("image/close.png") 50px 50px no-repeat;
    background-color: rgba(100,100,100,.1);
        }

<center>
《CSS3 新特性》 多背景效果图

</center>

盒子模型

目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox.

  selctor {
      display: -webkit-box;
      display: -moz-box;
      -webkit-box-orient: vertical;
      -webkit-box-orient: horizontal;
      box-flex: n;
  }

box-flex用于分配剩余区域所占比例

Transitions, Transforms 和 Animation

粗体文本

  • transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
  • transition-duration：用于指定这个过渡的持续时间
  • transition-delay：用于制定延迟过渡的时间
  • transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

Transforms

sel {
    -webkit-transform: skew(50deg);//倾斜
    -webkit-transform: scale(2, 0.5);//缩放
    -webkit-transform: rotate(30deg);//旋转
    -webkit-transform: translate(50px, 50px);//平移
    -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}

创建动画，使用 @keyframes 规则
animation 的变化参数其中

  • “duration”表示动画持续时间
  • “iteration-count”表示动画重复次数
  • direction 表示动画执行完一次后方向的变化方式（如第一次从右向左，第二次则从左向右）
  • “timing-function”表示变化的模式
    原文作者：顡er
    原文地址: https://www.jianshu.com/p/ae240decd18b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞