花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 417|回复: 53

[灌水] 网页可视对象的CSS阴影(一)

[复制链接]
  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2021-12-21 09:42 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    本帖最后由 马黑黑 于 2021-12-21 09:54 编辑

    之前,我们介绍过基于文本外观的修饰特效即 CSS文本阴影。文本是网页中的可视对象之一,其阴影的实现有专属的 CSS 属性命令,text-shadow。那么,其他网页可视对象又是如何实现阴影效果呢?

    CSS3 的世界里,box(盒子)概念针对非文本的可视元素,图片(img)、区域(div)、段落(p)、表格(table)、音频与视频播放的界面,等等等等,都被视为一个个的 box,因而都可以拥有自己的修饰手段,其中,阴影自然不可或缺。

    在文本阴影中,CSS 命令用到了 shadow,shadow 就是“影子”,text-shadow 就是文本的影子(阴影)了。那么,作为都是 box 的其他可视对象,box 的影子(阴影)命令自然就是 box-shadow 了。

    语法:style="box-shadow:值1 值2 值3 值4;"

    【说明】

    值1:水平方向的阴影值,如10个像素可表达为 10px
    值2:垂直方向的阴影值
    值3:模糊值,用 10px 这样的方式表达
    值4:阴影颜色,合法的颜色表达即可

    【例子】

    <div style="margin:0px auto; width:50%; height:200px; box-shadow:4px 4px 6px #000;">内容</div>

    效果与div标签的其他样式解释请看下楼——

    评分

    参与人数 1威望 +50 金钱 +100 经验 +50 收起 理由
    红影 + 50 + 100 + 50 赞一个!

    查看全部评分

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 09:43 | 显示全部楼层
    本帖最后由 马黑黑 于 2021-12-21 09:54 编辑

    
        阴影效果的核心代码:box-shadow:4px 4px 6px #000
        其他代码说明:
    
            margin:0px auto - auto是居中作用
            width:50% - 此 div 宽度设为父容器的一半
            height:200px - 此 div 的高度
    
    
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 10:25 | 显示全部楼层
    马黑黑 发表于 2021-12-21 09:43
    本帖最后由 马黑黑 于 2021-12-21 09:54 编辑

    如果不设置height,是不是就直接按照文字占位自动出现高度?
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 10:27 | 显示全部楼层
    试验:
    
        阴影效果的核心代码:box-shadow:4px 4px 6px #000
        其他代码说明:
    
            margin:0px auto - auto是居中作用
            width:50% - 此 div 宽度设为父容器的一半
            height:不要这个,多复制一个试试
    
    
    
        阴影效果的核心代码:box-shadow:4px 4px 6px #000
        其他代码说明:
    
            margin:0px auto - auto是居中作用
            width:50% - 此 div 宽度设为父容器的一半
            height:不要这个,多复制一个试试
    
    
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 10:30 | 显示全部楼层
    红影 发表于 2021-12-21 10:25
    如果不设置height,是不是就直接按照文字占位自动出现高度?

    是的。空白 div 如果不设置高度效果不好,演示需要设置了高度值。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 10:33 | 显示全部楼层
    margin外边距取值0,所以设置相对父容器的宽度的吧。
    用pre 所以不用设置padding了吧,这样也省力呢。

    这些命令的组合运用真有趣啊,这两个帖子太好了
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 10:36 | 显示全部楼层
    红影 发表于 2021-12-21 10:33
    margin外边距取值0,所以设置相对父容器的宽度的吧。
    用pre 所以不用设置padding了吧,这样也省力呢。

    对,pre照实渲染了文本,文本自身样式好就不用设置 margin(外边距) 和 padding(内边距)了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 10:36 | 显示全部楼层
    马黑黑 发表于 2021-12-21 10:30
    是的。空白 div 如果不设置高度效果不好,演示需要设置了高度值。

    能不能让图片和视频混排?比如我图片上扣一个透明洞,让视频在这个洞的后面播放
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 10:37 | 显示全部楼层
    红影 发表于 2021-12-21 10:33
    margin外边距取值0,所以设置相对父容器的宽度的吧。
    用pre 所以不用设置padding了吧,这样也省力呢。

    margin 的值可以随意
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 10:41 | 显示全部楼层
    红影 发表于 2021-12-21 10:36
    能不能让图片和视频混排?比如我图片上扣一个透明洞,让视频在这个洞的后面播放

    混排难度很大,因为你这是堆叠。图片和播放器堆叠在一起,可以考虑用图片做背景图,然后播放器放在上面,调整好大小和位置
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 10:41 | 显示全部楼层
    马黑黑 发表于 2021-12-21 10:36
    对,pre照实渲染了文本,文本自身样式好就不用设置 margin(外边距) 和 padding(内边距)了

    这个帖子和上一个帖子是两种不同的运用方法,对照着看真好
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 10:42 | 显示全部楼层
    红影 发表于 2021-12-21 10:41
    这个帖子和上一个帖子是两种不同的运用方法,对照着看真好

    很多东西可以配套使用,这和穿衣打扮是一个道理的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 10:43 | 显示全部楼层
    马黑黑 发表于 2021-12-21 10:37
    margin 的值可以随意

    若有取值, width:50%在显示的时候,就不是完全的50%的感觉了吧。
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 10:45 | 显示全部楼层
    红影 发表于 2021-12-21 10:43
    若有取值, width:50%在显示的时候,就不是完全的50%的感觉了吧。

    这么说吧:margin 和 padding 以及 border,它们的值都会算入所属对象的宽度值。50%的宽度还是有的,但前述那些值会在计算之列。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 14:38 | 显示全部楼层
    马黑黑 发表于 2021-12-21 10:41
    混排难度很大,因为你这是堆叠。图片和播放器堆叠在一起,可以考虑用图片做背景图,然后播放器放在上面, ...

    永图片做背景图,把播放器放上面,这个能做到。现在想把视频藏图片后面,只通过露的洞演示。
    这个也算是替清舟问的,她的那个帖子也想把视频扔在图片后面去
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 14:39 | 显示全部楼层
    马黑黑 发表于 2021-12-21 10:42
    很多东西可以配套使用,这和穿衣打扮是一个道理的

    搭配得当,则效果出彩
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 14:41 | 显示全部楼层
    马黑黑 发表于 2021-12-21 10:45
    这么说吧:margin 和 padding 以及 border,它们的值都会算入所属对象的宽度值。50%的宽度还是有的,但前 ...

    是留完宽度然后让那些边距起作用,还是把边距都计算入50%里,这两个还是有点区别的。
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 17:17 | 显示全部楼层
    红影 发表于 2021-12-21 14:41
    是留完宽度然后让那些边距起作用,还是把边距都计算入50%里,这两个还是有点区别的。

    当然有区别,但总体50%是不变的。
    作为子元素,其总宽度要比父容器小到一定程度,阴影才能显示出来
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-20 11:42
  • 签到天数: 1675 天

    [LV.Master]伴坛终老

    3053

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2021-12-21 17:23 | 显示全部楼层
    红影 发表于 2021-12-21 14:38
    永图片做背景图,把播放器放上面,这个能做到。现在想把视频藏图片后面,只通过露的洞演示。
    这个也算是 ...

    那可以考虑定位:两个元素通过定位一前一后重叠在一起
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1883

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2021-12-21 21:56 | 显示全部楼层
    马黑黑 发表于 2021-12-21 17:17
    当然有区别,但总体50%是不变的。
    作为子元素,其总宽度要比父容器小到一定程度,阴影才能显示出来

    嗯嗯,知道了,需要留出足够的空间。
     
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-12-20 13:13 , Processed in 0.106917 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表