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 变换

     效果:

  • 相关阅读:
    swing_AbstractTableModel 创建表格
    swing_tableModel 创建表格
    LDA主题模型
    jieba分词
    LightGBM介绍及参数调优
    机器学习中常见的损失函数
    const和define区别 static
    C++四种类型转换
    行为模式->策略模式
    结构模式->享元模式
  • 原文地址:https://www.cnblogs.com/jianghao233/p/9065169.html
Copyright © 2011-2022 走看看