天天看点
返回

【前端面试指南】CSS3新特性

  1. 边框
    1. 圆角效果 
      div.a {
            /* 上右下左都是 10px */
            border-radius: 10px;
            /* 上右下左参数不一 */
            border-radius: 10px 20px 30px 40px;
        }
    2. 实心圆 
      div.a {
            height: 100px;
            width: 100px;
            background: #111;
            border-radius: 50px;
        }
    3. 左半圆 
      div.a {
            height: 100px;
            width: 50px;
            background: #111;
            border-radius: 50px 0 0 50px;
        }
    4. 上半圆 
      div.a {
            height: 50px;
            width: 100px;
            background: #111;
            border-radius: 50px 50px 0 0 ;
        }
    5. 阴影
      1. box-shadow
        1. box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
        【前端面试指南】CSS3新特性
        代码 
        .a {
            height: 200px;
            width: 200px;
            box-shadow: 4px 3px 20px 6px #333 inset,
                -30px 20px 30px -2px #ecb;
        }
      2. 阴影模糊半径与阴影扩展半径的区别
        1. 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
        2. 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
    6. 为边框应用图片 border-image
  2. 颜色
    1. rgba 
      color：rgba(R,G,B,A)
/*举例*/
color：rgba(255,255,255,0.5)
    2. 渐变颜色 
      1. background-image:linear-gradient(to top left,red,green);
background-image: linear-gradient(-90deg, red, yellow);
background-image:radial-gradient(red, yellow, green);
background-image: radial-gradient(circle, red, yellow, green);
      2. 【前端面试指南】CSS3新特性
  3. 文字与字体
    1. text-overflow：使用…表示文本溢出 
      text-overflow:clip; /*剪切*/
overflow:hidden; /*溢出内容为隐藏*/
white-space:nowrap; /*强制文本在一行内显示*/

text-overflow:ellipsis; /*显示省略标记*/
overflow:hidden; /*溢出内容为隐藏*/
white-space:nowrap; /*强制文本在一行内显示*/
    2. word-wrap：当前行超过指定容器的边界时是否断开转行。 
      word-wrap:normal；/*控制连续文本换行*/
word-wrap:break-word；/*内容将在边界内换行*/
    3. 嵌入字体
      1. 设置字体@font-face 
        @font-face {
    font-family: "XX Font";
    src: url("./xx");
}
      2. 使用字体 
        p {
    font-size :12px; 
  	font-family : "XX Font";
}
    4. 文本阴影 
      text-shadow: 4px 4px 0 red;
text-shadow: X-Offset Y-Offset blur color;
  4. 与背景相关的样式
    1. background-origin：设置元素背景图片的起始位置 
      background-origin:border-box; /*边框*/
background-origin:padding-box; /*内边距*/
background-origin:content-box; /*内容区域*/
    2. background-clip：将背景图片做适当的裁剪以适应实际需要 
      background-clip:border-box; /*边框*/
background-clip:padding-box; /*内边距*/
background-clip:content-box; /*内容区域*/
background-clip:no-clip; /*不裁剪*/
    3. background-size：设置背景图片的大小 
      background-size: auto /*默认值，不改变背景图片的原始高度和宽度；*/
background-size: 60px 80px /*两个值时，将背景图片宽高依次设置为前面两个值 */
background-size: 60px /*一个值时，将其作为图片宽度值来等比缩放*/
background-size: 50% /* 设置为所在元素宽高乘以百分比得出的数值 */
background-size: cover /*覆盖，即将背景图片等比缩放以填满整个容器*/
background-size: contain /*容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。*/
  5. CSS3选择器
    1. 选择器的优先级：

      !important;

       > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
    2. 属性选择器
      【前端面试指南】CSS3新特性
      a[class^=icon] {
  background: green;
  color: #fff;
}

a[href$=pdf] {
  background: orange;
  color: #fff;
}

a[title*=more] {
  background: blue;
  color: #fff;
}
    3. 结构性伪类选择器
      1. root：根元素，在HTML文档中，根元素始终是<html>。 
        :root {
            background: blue;
        }
      2. not：否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 
        div :not([id="footer"]) {
            background: orange;
        }
      3. empty：选择器表示的就是空，一点内容都没有，哪怕是一个空格。 
        p:empty {
            display: none;
        }

      4. target：目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

        点击链接后将背景改为桔色

        :target {
            background: orange;
        }
      5. first-child：选择父元素的第一个子元素的元素E 
        ul>li:first-child {
            color: red;
        }
      6. last-child 
        ul>li:last-child {
            border-bottom: none;
        }
      7. nth-child(n)
        【前端面试指南】CSS3新特性
        ol>li:nth-child(2n+1) {
            background: green;
        }
      8. nth-last-child 
        ol>li:nth-last-child(5) {
            background: orange;
        }
      9. first-of-type选择器：指定了元素的类型，其主要用来定位一个父元素下的某个类型的第一个子元素 
        .wrapper>div:first-of-type {
            background: orange;
        }
      10. nth-of-type(n)选择器：计算父元素中指定的某种类型的子元素 
        .wrapper>p:nth-of-type(2n) {
            background: orange;
        }
      11. last-of-type选择器：父元素下的某个类型的最后一个子元素 
        .wrapper>p:last-of-type {
            background: orange;
        }
      12. nth-last-of-type(n)选择器 
        .wrapper>p:nth-last-of-type(3) {
            background: orange;
        }
      13. only-child选择器：选择父元素中仅有一个的子元素，而且是一个唯一的子元素 
        .post p:only-child {
  background: orange;
}
      14. only-of-type选择器：选择一个元素是它的父元素的唯一一个相同类型的子元素 
        .wrapper>div:only-of-type {
            background: orange;
        }
      15. :enabled选择器 
        input[type="text"] :enabled {
            border: 1px solid #f36;
            box-shadow: 0 0 5px #f36;
        }
      16. :disabled选择器 
        input[type="submit"]:disabled {
  background: #eee;
  border-color: #eee;
  color: #ccc;
}
      17. :checked选择器：单选按钮和复选按钮选中状态的样子 
        input[type="radio"]:checked + span {
  opacity: 1;
}
      18. ::selection选择器：用来匹配突出显示的文本(用鼠标选择文本时的文本) 
        ::selection {
  background: orange;
  color: white;
}

::-moz-selection {
  background: orange;
  color: white;
}
      19. :read-only选择器：用来指定处于只读状态元素的样式 
        input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}
      20. :read-write选择器：指定当元素处于非只读状态时的样式 
        input[type="text"]:-moz-read-write{
  border:2px solid red;
}
input[type="text"]:read-write{
  border:2px solid red;
}
      21. ::before和::after：给元素的前面或后面插入内容 
        .clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
  6. CSS3变形
    1. 旋转 rotate()：通过指定的角度参数使元素相对原点进行旋转
    2. 扭曲 skew()：让元素倾斜显示
    3. 缩放 scale()：
      1. scale(X,Y)使元素水平方向和垂直方向同时缩放
      2. scaleX(x)元素仅水平方向缩放（X轴缩放）
      3. scaleY(y)元素仅垂直方向缩放（Y轴缩放） 
      div:hover {
            -webkit-transform: scale(1.5, 0.5);
            -moz-transform: scale(1.5, 0.5) transform: scale(1.5, 0.5);
        }
    4. 位移 translate()：
      1. translate(x,y)水平方向和垂直方向同时移动
      2. translateX(x)仅水平方向移动（X轴移动）
      3. translateY(Y)仅垂直方向移动（Y轴移动） 
      div:hover {
            -webkit-transform: translate(50px, 100px);
            -moz-transform: translate(50px, 100px);
            transform: translate(50px, 100px);
        }
    5. 原点 transform-origin
      【前端面试指南】CSS3新特性
      div {
            -webkit-transform-origin: left top;
            transform-origin: left top;
        }
  7. CSS3动画
    1. 过渡属性 transition-property：指定过渡动画的CSS属性名称
      【前端面试指南】CSS3新特性
      div {
            -webkit-transition-property: width;
            transition-property: width;
        }
    2. 过渡所需时间 transition-duration：设置从旧属性过渡到新属性花费的时间长度，俗称持续时间。 
      div {
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
        }
    3. 过渡函数 transition-timing-function：指定浏览器的过渡速度
      【前端面试指南】CSS3新特性
      div {
            -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    4. 过渡延迟时间 transition-delay：指定一个动画开始执行的时间 
      div {
            /* 指定元素、持续时长、过渡函数、延迟时长 */
            transition: background 0.8s ease-in 0.3, color 0.6s ease-out 0.3;
        }
    5. 关键帧 @keyframes 
      @keyframes changecolor {
            0% {
                background: red;
            }

            20% {
                background: blue;
            }

            40% {
                background: orange;
            }

            60% {
                background: green;
            }

            80% {
                background: yellow;
            }

            100% {
                background: red;
            }
        }

        div:hover {
            animation: changecolor 5s ease-out .2s;
        }
    6. 调用动画 animation-name：调用 @keyframes 定义好的动画 
      div {
            animation-name: around;
        }
    7. 设置动画播放时间 animation-duration：指定元素播放动画所持续的时间长 
      div {
            animation-duration: 5s;
        }
    8. 设置动画播放方式 animation-timing-function：让元素根据时间的推进来改变属性值的变换速率
      【前端面试指南】CSS3新特性
      div {
            animation-timing-function: ease;
        }
    9. 设置动画开始播放的时间 animation-delay：定义在浏览器开始执行动画之前等待的时间。 
      div {
            animation-delay: 3s;
        }
    10. 设置动画播放次数：animation-iteration-count 
      div {
            animation-iteration-count: 5;
            animation-iteration-count: infinite;
        }
    11. 设置动画播放方向 animation-direction 
      div {           
           animation-direction: normal;  /* 动画的每次循环都是向前播放； */          
           animation-direction: alternate; /* 动画播放在第偶数次向前播放，第奇数次向反方向播放。 */
       }
    12. 设置动画的播放状态 animation-play-state 
      div {            
            animation-play-state: running; /* 默认值 将暂停的动画重新播放 */            
            animation-play-state: paused; /* 将正在播放的动画停下来 */
        }
    13. 设置动画时间外属性 animation-fill-mode
      【前端面试指南】CSS3新特性
      div {
            animation-fill-mode: forwards;
        }
  8. 布局样式相关
    1. 多列布局 columns：主要应用在文本的多列布局 
      div {
            columns: 150px 3;
        }
    2. 列间距 column-gap 
      div {
            column-width: auto;
            column-width: 20px;
        }
    3. 列表边框 column-rule 
      div {
            column-count: auto;
            column-count: 4;
        }
    4. 列间距 column-gap 
      div {
            column-gap: normal;
            column-gap: 2em;
        }
    5. 列表边框 column-rule：定义列与列之间的边框宽度、边框样式和边框颜色。
      【前端面试指南】CSS3新特性
      div {
            column-rule: 2px dotted green;
        }
    6. 跨列设置 column-span：横跨所有列 
      div {
            column-span: none; /*默认值 不横跨任何列*/
            column-span: all; /*横跨所有列*/        
        }
    7. 盒子模型 box-sizing
      【前端面试指南】CSS3新特性
      div {
            box-sizing: border-box;
            box-sizing: content-box;
            box-sizing: inherit;
        }
  9. 响应式设计
    1. 媒体类型
      值 设备类型
      All 所有设备
      Braille 盲人用点字法触觉回馈设备
      Embossed 盲文打印机
      Handheld 便携设备
      Print 打印用纸或打印预览视图
      Projection 各种投影设备
      Screen 电脑显示器
      Speech 语音或音频合成器
      Tv 电视机类型设备
      Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端
    2. 媒体查询：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。
  10. 自由缩放属性 resize 
    div {
  resize: none; /* 用户不能拖动元素修改尺寸大小。 */
  resize: both; /* 用户可以拖动元素，同时修改元素的宽度和高度 */
  resize: horizontal; /* 	用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 */
  resize: vertical; /* 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 */
  resize: inherit;  /* 继承父元素的resize属性值。 */
}
  11. 外轮廓属性 outline[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qPO8wzTJ-1597735261194)(/Users/light/Library/Application Support/typora-user-images/image-20200712111839521.png)] 
    div {
            outline: red solid 2px;
        }
  12. CSS生成内容 content 
    h1:before {
            content: "我是被插进来的";
            color: red;
        }
前端面试指南
上一篇: linux命令详解 每天一个linux命令目录
下一篇: Win7系统设置成允许远程登录_20200317

继续阅读