• 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>:使用重复的径向(放射性)渐变创建遮罩图像。
  • 相关阅读:
    Niginx 集群负载均衡策略
    饿了吗开源组件库Element模拟购物车系统
    HTML5随记
    Javascript基础
    Javascript封装弹出框控件
    sublime插件(配合nodejs环境)
    使用Java注解开发自动生成SQL
    Java实现多线程下载
    开发工具随记
    开发工具的安装及环境搭建
  • 原文地址:https://www.cnblogs.com/limengjie0104/p/9109248.html
Copyright © 2020-2023  润新知