马黑黑 发表于 2022-1-5 12:00

古筝曲·松

<style>
.mDiv { margin:0 auto;width:700px; color:transparent; box-shadow:2px 2px 4px #1e1e1e; border-radius:8px 4px; padding: 6px; background:radial-gradient(green,olive,pink); -webkit-background-clip:text; display:flex; flex-direction:row; }
.mL { line-height:80px; font-family:SimSun; font-size:30px; font-weight:bold; writing-mode:vertical-lr; }
.mR { font-family:'Micosoft Yahei'; }
</style>

<div class="mDiv">
        <div class="mL">古筝曲·松</div>
        <div class="mR">
                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=623346&amp;auto=1&amp;height=66"></iframe>
                <p>&nbsp;<br>宫城喜代子被称为人间国宝，也是宮城道雄的弟子；而无论是宮城道雄还是宫城喜代子，录音资料都很稀少。这一套专辑中她演奏了师父的大量作品，对这两位筝曲名手以及日本传统音乐来说都是非常珍贵的资料。<br>&nbsp;</p>
                <p>——关于宫城喜代子，所知甚少，资料也不好找，上面一行是摘录的，在这里可能文不对题。<br>&nbsp;</p>
                <p>本帖只是想演示一下 background-clip 的背景裁剪效果：以 text 为裁剪参照，效果应该是只有文字能显示背景色。不知浏览器对此的支持度如何。<br>&nbsp;</p>
                <p style="text-align:right;">马黑黑二〇二二年一月五日 &nbsp;&nbsp;&nbsp;<br>&nbsp;</p>
        </div>
</div>

马黑黑 发表于 2022-1-5 12:01

如果浏览器不支持，上面的文字可能一个字也看不到

樵歌 发表于 2022-1-5 13:25

只是最右边一两字看不到，音乐很响。

马黑黑 发表于 2022-1-5 14:16

樵歌 发表于 2022-1-5 13:25
只是最右边一两字看不到，音乐很响。

你的浏览器是什么

红影 发表于 2022-1-5 14:59

变色的，让四周的文字颜色都变化了。{:4_187:}

马黑黑 发表于 2022-1-5 15:04

红影 发表于 2022-1-5 14:59
变色的，让四周的文字颜色都变化了。

文字能看的齐木有

红影 发表于 2022-1-5 15:06

马黑黑 发表于 2022-1-5 15:04
文字能看的齐木有

全部文字能看到，右边的文字很靠近边框。文字颜色是渐变的。现在是用谷歌浏览器看的。
用360打开只看到一个渐变图，文字看不到。

马黑黑 发表于 2022-1-5 15:15

红影 发表于 2022-1-5 15:06
全部文字能看到，右边的文字很靠近边框。文字颜色是渐变的。现在是用谷歌浏览器看的。
用360打开只看到 ...

360有两个浏览器，一个普通版，一个极速版，后者应该可以（除非版本很老）

马黑黑 发表于 2022-1-5 15:29

background-clip 有三个可用的值：

border-box ：背景被被裁剪到边框盒
padding-box ：背景被裁剪到内边距框
content-box ：背景被裁剪到内容框

至于 text 值，背景被裁剪到文本上，是较后推出，国内教材一般都没讲到，估计也与浏览器对它的支持度有关。一般说，这样使用能够被Chrome内核的浏览器识别：

-webkit-background-clip: text;

而其他值，可以只这样表示：

background-clip: content-box;

红影 发表于 2022-1-5 16:45

马黑黑 发表于 2022-1-5 15:29
background-clip 有三个可用的值：

border-box ：背景被被裁剪到边框盒


黑黑太厉害了，很赞{:4_199:}

加林森 发表于 2022-1-5 17:44

在手机上看得全，在360极速浏览器也可以看见，好像另外两个字就看不全了。

马黑黑 发表于 2022-1-5 18:05

红影 发表于 2022-1-5 16:45
黑黑太厉害了，很赞

这是CSS厉害，它还在发展中。W3C的东东是有众人贡献的，我们国人也提交了不少

樵歌 发表于 2022-1-5 19:49

马黑黑 发表于 2022-1-5 14:16
你的浏览器是什么

2345

樵歌 发表于 2022-1-5 19:50

马黑黑 发表于 2022-1-5 14:16
你的浏览器是什么

帮我推荐一个好用的呗。

马黑黑 发表于 2022-1-5 19:59

樵歌 发表于 2022-1-5 19:50
帮我推荐一个好用的呗。

这个因人而异的。我喜欢用Chrome类别的，机器性能好的话用Edge最新版，性能一般的用 CentBroser（百分浏览器），火狐也不错

马黑黑 发表于 2022-1-5 20:00

樵歌 发表于 2022-1-5 19:49
2345

这个是流氓浏览器。所有2345的产品最好别用

红影 发表于 2022-1-5 20:26

马黑黑 发表于 2022-1-5 18:05
这是CSS厉害，它还在发展中。W3C的东东是有众人贡献的，我们国人也提交了不少

W3C:World Wide Web Consortium,万维网联盟
相信里面也有黑黑的贡献吧。

马黑黑 发表于 2022-1-5 21:04

红影 发表于 2022-1-5 20:26
W3C:World Wide Web Consortium,万维网联盟
相信里面也有黑黑的贡献吧。

不可能，那是大虾级别的才有这个水平

加林森 发表于 2022-1-5 21:23

马黑黑 发表于 2022-1-5 21:04
不可能，那是大虾级别的才有这个水平

跟到学习得还不错！谢谢老黑！

红影 发表于 2022-1-5 22:24

马黑黑 发表于 2022-1-5 21:04
不可能，那是大虾级别的才有这个水平

黑黑这么厉害，小虾级别肯定是有的，说不定也属于大虾呢{:4_173:}
页: [1] 2
查看完整版本: 古筝曲·松