zoukankan      html  css  js  c++  java
  • CSS效果小结

    效果属性

    1.box-shadow(盒子阴影)

    示例

    加上 box-shadow

    内阴影

    复杂例子

    阴影的形状跟原来的形状是一样的

     

    结果:

    box-shadow 作用:1.营造层次感(立体感)2.充当没有宽度的边框(没有大小,不会占据位置)3.特殊效果

    2.text-shadow(文本阴影)

    作用:1.立体感  2.印刷品质感(边缘有模糊效果)

    比较:

    3.border-radius

    圆角矩形

    圆形

    半圆/扇形

    只有左上角,其余均为 0,若删掉 border 属性,则为扇形

    椭圆

    10px 和 20px 分别为 x轴 和 Y轴 的半径,设置椭圆

    4.background

     多背景叠加、渐变制作图案和纹理

    雪碧图动画

    鼠标放到上面会上下进行切换

    背景图尺寸适应

    背景覆盖整个容器(cover),同时整个长宽比不会变,超出部分会隐藏

    5.clip-path(按路径进行裁剪)

    对容器进行裁剪

    圆形裁剪

    常见的几何图形进行裁剪

    支持动画

    自定义路径裁剪

    6.3D 变换

     变换 transform

     

    位移/缩放/斜切/旋转

    3D 变换

     效果:

  • 相关阅读:
    android 项目
    input keyevent 数字对应的操作
    logcat 使用方法
    android查看内存使用情况
    图片点击放大效果
    禁止img图片拖动在新窗口打开
    人工智能
    游戏开发
    随手做的一个模拟弹出窗口
    Html的<meta>标签使用方法及用例
  • 原文地址:https://www.cnblogs.com/jianghao233/p/9065169.html
Copyright © 2011-2022 走看看