css3 有哪些新特性

时间:2019-11-18 21:59 来源:未知作者:zengmumu 点击:次

　你会看到这个提示，那是因为你的系统无法识别某栏目的模型信息，或者你新建模型后，没为这个模型设计单独的模板。不同模型的文档浏览页的模板为：article_模型名字标识.htm 如“article_article.htm”，更多的信息你可以在频道模型管理的地方查看。

附加标题 内容：
模板调用标记：

题型:1单选，2多选，3填空，4问答，5排序 内容：
模板调用标记：

选项A 内容：
模板调用标记：

选项B 内容：
模板调用标记：

选项C 内容：
模板调用标记：

选项D 内容：
模板调用标记：

答案内容：
模板调用标记：

选择器

E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。

RGBA

回答此问题，面试官很可能继续问：rgba()和 opacity 的透明效果有什么不同？

多栏布局

<div class="mul-col">
  <div>
    <h3>新手上路</h3>
    <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
  </div>
  <div>
    <h3>付款方式</h3>
    <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
  </div>
  <div>
    <h3>淘宝特色</h3>
    <p>手机淘宝 旺信 大众评审 B格指南</p>
  </div>
</div>

.mul-col {
  column-count: 3;
  column-gap: 5px;
  column-rule: 1px solid gray;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 10px;
}

多背景图

/* backgroundimage:url('1.jpg),url('2.jpg') */

CSS3 word-wrap 属性

p.test {
  word-wrap: break-word;
}

文字阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

@font-face 属性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {
  font-family: BorderWeb;
  src: url(BORDERW0.eot);
}
@font-face {
  font-family: Runic;
  src: url(RUNICMT0.eot);
}
.border {
  font-size: 35px;
  color: black;
  font-family: "BorderWeb";
}
.event {
  font-size: 110px;
  color: black;
  font-family: "Runic";
}

/* 淘宝网字体使用 */

@font-face {
  font-family: iconfont;
  src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}

圆角

border-radius: 15px;

边框图片

CSS3 border-image 属性

盒阴影

/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */

盒子大小

CSS3 box-sizing 属性

媒体查询

CSS3 @media 查询

CSS3 动画

@keyframes

@keyframes abc {
  from {
    transform: rotate(0);
  }
  50% {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(360deg);
  }
}

animation 属性

/* animation ： name duration timing-function delay interation-count direction play-state */

渐变效果

background-image: -webkit-gradient(
  linear,
  0% 0%,
  100% 0%,
  from(#2a8bbe),
  to(#fe280e)
);

CSS3 弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 过渡

div {
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari 和 Chrome */
  -o-transition: width 2s; /* Opera */
}

CSS3 变换

rotate()旋转
translate()平移
scale( )缩放
skew()扭曲/倾斜
变换基点
3d 转换

参考

难度：1入门级，2初级，3中级，4高级 内容：
模板调用标记：

专业分类 内容：
模板调用标记：

(责任编辑：zengmumu)

css3 有哪些新特性

时间:2019-11-18 21:59 来源:未知 作者:zengmumu 点击:次

时间:2019-11-18 21:59 来源:未知作者:zengmumu 点击:次