zoukankan      html  css  js  c++  java
  • CSS3-阴影参数基础

    box-shadow

    语法:text-shadow: x-shadow y-shadow distance color;

    值  描述 
    x-shadow  必需。水平阴影的位置。允许负值。
    y-shadow  必需。垂直阴影的位置。允许负值。
    distance  可选。模糊的距离。 测试
    color  可选。阴影的颜色

    text-shadow

    语法:box-shadow: x-shadow y-shadow distance size color inset/outset;

    描述
    x-shadow 必需。阴影水平偏移量,可正可负,正值表示阴影在右边,负值表示阴影在左边。
    y-shadow 必需。阴影垂直偏移量,可正可负,正值表示阴影在上边,负值表示阴影在下边。
    distance 可选。阴影模糊距离。只能为正值,值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊。
    size  可选。阴影扩展半径。可正可负,正值表示整个阴影都延展扩大,负值表示缩小。
    color 可选。阴影的颜色。
    inset 可选。将外部阴影 (outset) 改为内部阴影。

    box-reflect

    向框添加一个或多个倒影。
    
    (1)direction:定义倒影的方向,取值包括:
    
    above:倒影在对象的上边。
    below:倒影在对象的下边。
    left:倒影在对象的左边。
    right:倒影在对象的右边。
    (2)offset:定义倒影与对象之间的间隔,可正可负,默认为0。取值包括:
    
    长度值
    百分比(根据对象的尺寸进行确定)
    (3)mask-box-image:定义遮罩图像,该图像将覆盖投影区域,默认为无遮罩。
    
    <url>:使用绝对或相对地址指定遮罩图像。
    <linear-gradient>:使用线性渐变创建遮罩图像。
    <radial-gradient>:使用径向(放射性)渐变创建遮罩图像。
    <repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。
    <repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。
  • 相关阅读:
    STM32如何用LCD、OLED显示浮点数
    STM32F 系列芯片 容量文件选择 startup_stm32f10x_hd
    sprintf与浮点数表示
    VSCode安装、配置
    用IDEA编写Vue
    mychart.onclick点击一次,执行多次
    软件测试和软件项目的关系
    java list model转换
    几个Java常用库
    mysql json 数组查询
  • 原文地址:https://www.cnblogs.com/limengjie0104/p/9109248.html
Copyright © 2011-2022 走看看