GameMale
登陆 / 注册 搜索

USERCENTER

SEARCHSITE

搜索

查看: 1166|回复: 46
收起左侧

[技术交流] 【花里胡哨】CSS制作伪单色边框悬停平滑转变为渐变色边框

  [复制链接] |关注本帖

安静的海边裸体克里斯圣甲虫秘典【新春限定】果体 隆生金蛋的鹅永远的克叔亚瑟‧摩根史莱姆牧场虚空之海的鲸業火死鬥

     楼主| 星之子 发表于 2024-9-26 20:11:38 | 显示全部楼层 |阅读模式 <

    上面这个是效果图,具体悬停效果可以在我的空间查看。
    涉及到的相关代码如下,先贴出代码,然后我逐条解释:
    1. #block1 i img {
    2.     transition: all 0.3s; /*悬停平滑变化*/
    3.     border-radius: 4px; /*给图片添加圆角*/
    4.     filter: sepia(30%) saturate(30%) hue-rotate(5deg); /*做旧效果*/
    5.     box-shadow: inset 0 0 0 2px #f0f0f0; /*用单色内阴影伪装为白色边框*/
    6.     padding: 2px; /*添加内边距 这个宽度便是内阴影透明后彩色背景露出部分伪装渐变色边框的宽度*/
    7.     background-image: linear-gradient(109.6deg, rgba(255,179,189,1) 1.8%, rgba(254,248,154,1) 50.6%, rgba(161,224,186,1) 100.3%); /*添加渐变色背景*/
    8. }

    9. #block1 i img:hover {
    10.     transform: scale(1.2); /*悬停从中心放大1.2倍数*/
    11.     text-decoration: none;
    12.     filter: sepia(0%) saturate(120%) hue-rotate(0); /*取消做旧效果 提高饱和度*/
    13.     box-shadow: inset 0 0 0 2px transparent; /*将内阴影变为透明 渐变色背景露出伪装边框 这一过程可以平滑*/
    14. }
    复制代码

    • 为什么没有使用border: 2px solid color?
      CSS中的border是图片的边框,但图片的边框只能设置为单色,并无法满足我们要的“渐变色边框”的目标。
    • 在CSS中,一张img的结构其实是background-image叠在下方,图片叠在其上,然后添加内阴影或外阴影。
      但background-image本质上是一张图片,你可以把它设置为简单的单色,但也可以把它设置为渐变,甚至干脆更复杂的直接贴上一张图片——因此无法在悬停的时候通过transition设置为平滑变换。
    • 所以思路就很明确了,这里我的做法是:让背景始终不变,而是设置内阴影作为“边框”,以此达到平滑变换成渐变彩色边框的目的。
      · 将background-image设置为彩色渐变。
      · 给图片添加2px的内边距,再添加2px、透明度为0的纯色内阴影box-shadow,以此来伪装成单色边框。
      · 在悬停时,将内阴影变为透明;这一过程可以通过transition平滑变换,就达到了目的。



    来自群组: 星象占卜

    本帖子中包含更多资源

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

    x

    评分

    参与人数 1血液 +2 追随 +1 堕落 +1 收起 理由
    lostorage + 2 + 1 + 1

    查看全部评分

    回复

    使用道具 举报

    收到情书漂洋小船冒险用指南针破损的旧书人鱼之泪雪王的心脏苏格兰圆脸胖鸡[Pro Max]丛林的鸟飞走了不曾寄出的信件幽灵竹筒

      凯诺斯 发表于 2024-9-26 20:16:42 | 显示全部楼层 <
      回复

      举报

      永亘环小狮欢舞『搓粉团珠』黄粱一梦【新春限定】果体 隆死灵之书永远的克叔業火死鬥实现梦想官复原职

        娱乐法师火布偶 发表于 2024-9-26 20:17:24 | 显示全部楼层 <
        回复

        举报

        『不败之花』『搓粉团珠』永亘环小狮欢舞金牌矿工幸运女神的微笑人鱼之泪和你一起飞行的皮卡丘圣甲虫秘典幸福的小阿尔

          PURO_ 发表于 2024-9-26 20:18:22 | 显示全部楼层 <
          回复

          举报

          裸体克里斯【圣诞限定】心心念念小雪人享受美食的小伯『不败之花』『搓粉团珠』人世之始打开一个礼物盒小狮欢舞永亘环这天我们之间是粉色的

            zzy159 发表于 2024-9-26 20:20:25 | 显示全部楼层 <
            回复

            举报

            TRPG版塊永亘环没有梦想的咸鱼『搓粉团珠』夏日柯基苏格兰圆脸胖鸡夏尔霍格沃兹魔法学校寶可夢 Pokémon神奇四叶草

              福黎 发表于 2024-9-26 20:22:22 | 显示全部楼层 <
              星佬考虑一下用动画把渐变做成循环效果(
              回复

              举报

              最终幻想XIV安静的海边刺杀者匕首青鸾杰西·麦克雷启程擎天柱(Peterbilt389)大黄蜂(ChevroletCamaro)妙手空空

                贰狼Awoo 发表于 2024-9-26 20:25:58 | 显示全部楼层 <
                回复

                举报

                骑兽之子禽兽扒手夏之歌丹雀衔五穗,人间始丰登缘起星空

                  nuomici 发表于 2024-9-26 20:29:42 | 显示全部楼层 <
                  回复

                  举报

                  亚索月影狼晓月终焉旅行骰子!卡利亚权杖

                    黑达克 发表于 2024-9-26 20:31:24 | 显示全部楼层 <
                    效果很酷炫,互赠的时候看到会觉得很惊喜吧,适合喜欢给自己空间搞得花里胡哨的坛友呢
                    回复

                    举报

                    无瑕的回忆威尔卡斯虎克船长意气风发的海盗刀枪金钱马车朴素的誓言Futūrum(未来)果体76文森特‧瓦伦丁

                      JYYYY 发表于 2024-9-26 20:38:43 | 显示全部楼层 <
                      回复

                      举报

                      【新手友好】昆進GM論壇進階勛章寻觅幸运女神的微笑『逆境中的幸运女神』牧羊人克里斯·埃文斯

                        AMOR 发表于 2024-9-26 20:56:42 | 显示全部楼层 <
                        回复

                        举报

                        赛博朋克2077『冰雕马拉橇』【圣诞限定】心心念念小雪人官复原职岛田源氏里昂‧S‧甘乃迪擎天柱(Peterbilt389)月光骑士

                          枫_Age 发表于 2024-9-26 20:56:53 | 显示全部楼层 <
                          回复

                          举报

                          亚瑟‧摩根杰西·麦克雷索林·临终一役BIG BOSS希尔瓦娜斯·风行者岛田半藏岛田源氏

                            除却巫山不是云 发表于 2024-9-26 20:57:59 | 显示全部楼层 <
                            回复

                            举报

                            诺克提斯·路西斯·伽拉姆巴哈姆特性感男神GM保加利亚妖王虚空之海的鲸男巫之歌

                              sanweny 发表于 2024-9-26 21:01:38 | 显示全部楼层 <
                              回复

                              举报

                              永亘环『落樱缤纷』『搓粉团珠』『不败之花』『住在GM村』『灰域来音』『眼榴』『钟楼盐水棒冰』『泥潭颂唱者』『逆境中的幸运女神』

                                notunicorna 发表于 2024-9-26 21:03:23 | 显示全部楼层 <
                                回复

                                举报

                                業火死鬥实现梦想官复原职裸体克里斯纯真护剑内森·德雷克『伊黎丝的赞词』Beauty and the Beast『不败之花』史莱姆牧场

                                  scfy 发表于 2024-9-26 21:03:48 | 显示全部楼层 <
                                  回复

                                  举报

                                  【圣诞限定】心心念念小雪人吃饱金币的Doge被释放的灵魂【新春限定】果体 隆業火死鬥男巫之歌虚空之海的鲸卡利亚权杖诺曼底号

                                    折木 发表于 2024-9-26 21:32:26 | 显示全部楼层 <
                                    回复

                                    举报

                                    20x43 隐形➀未散的宴席爬行植物Ⓛ『泥潭颂唱者』爬行植物Ⓡ不朽之恋缘起星空希尔瓦娜斯·风行者虚空之海的鲸卡利亚权杖

                                      Riverlethe 发表于 2024-9-26 21:41:16 | 显示全部楼层 <
                                      回复

                                      举报

                                      業火死鬥旧日支配者—克苏鲁熔岩鹰永亘环月影狼

                                        深暗幽狼 发表于 2024-9-26 21:50:08 | 显示全部楼层 <
                                        够花里胡哨,不过提供悬浮和点击的反馈也好像实用(?
                                        要是可以做到二次确认就好,防止萌新被某些黑心空间好奇点击从而亏失金币(
                                        回复

                                        举报

                                        没有梦想的咸鱼阿怪GHOST裸体克里斯【圣诞限定】心心念念小雪人【夏日限定】夏日的泰凯斯史莱姆牧场虚空之海的鲸遗留之人的城堡男巫之歌

                                          前方无怪 发表于 2024-9-26 22:36:54 | 显示全部楼层 <
                                          回复

                                          举报

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

                                          本版积分规则

                                          文字版|手机版|小黑屋|GameMale

                                          GMT+8, 2025-2-25 08:09 , Processed in 0.170037 second(s), 143 queries , Redis On.

                                          Copyright © 2013-2025 GameMale

                                          All Rights Reserved.

                                          快速回复 返回列表