我要投稿

css圆形-css实现方形渐变边框

bendan520 css

2023-08-20 0 8,130 百度已收录

进不了网站？换个网络试试！

实现方形渐变边框非常简单，只需要给这个元素设置一定的padding，将背景设置为#fff，然后借助background-clip将背景裁剪到内行距框即可，然后padding的值就是border的值，然后设置这个元素的伪元素渐变背景就可以达到效果。效果如下：

在线示例查看

在上面的例子中，页面的背景色和该元素的背景色都设置为#fff。一旦页面的背景颜色不是蓝色，元素的蓝色背景就会显露出来。效果如下：

那么有没有其他方法可以实现这些镂空效果呢？答案一定是肯定的！ css mask属性允许用户通过抚摸或裁剪图像的特定区域来隐藏元素的部分或全部可见区域，这听起来像个笑话。

面膜的原理

遮罩可以是 css 渐变，也可以是图片或 svg。透明度为0的部分不可见，透明度为1的部分可见。

执行

首页使用Linear-Gradient实现渐变背景，代码及效果如下：

<div class="pie"></div>

.pie {
  width: 200px;
  height: 200px;
  margin: 40px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, red, transparent, yellow);
}

接下来我们画一个同样大小的svg圆，代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1">
  <circle cx="100" cy="100" r="96" stroke="black" stroke-width="4" fill="transparent"/>
</svg>

由于描边透明度为0的部分是不可见的，所以需要将填充设置为透明css圆形，并将描边设置为任意不透明颜色才可见。将此描边应用到 .pie 元素即可实现最终效果。

值得注意的是，下面的-webkit-mask-image的值是上面的svg的base64转码后的值。

.pie {
   -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRo%0APSIyMDAiIGhlaWdodD0iMjAwIiB2ZXJzaW9uPSIxLjEiPgogIDxjaXJjbGUg%0AY3g9IjEwMCIgY3k9IjEwMCIgcj0iOTYiIHN0cm9rZT0iYmxhY2siIHN0cm9r%0AZS13aWR0aD0iNCIgZmlsbD0idHJhbnNwYXJlbnQiLz4KPC9zdmc+);
   -webkit-mask-size: 100%;
   -webkit-mask-position: 0;
   -webkit-mask-repeat: no-repeat;
}

最终疗效的实现

参考链接

CSS3面膜安利报告

错觉css圆形，一行代码实现空心效果

CSS 实现优惠券的方式

CSS实现文字颜色渐变

克洛兹·3年前·3,080次浏览·

克洛兹

文章目录

前言

我经常在博客上尝试一些异想天开的设计。博客首页左侧热门文章的小工具上的文字颜色一直不太令人满意css 字体颜色，所以想尝试一下渐变颜色的文字是否会有好的效果。

文字渐变色实现background-clip

这个实现的主要思想就是对背景进行裁剪。 background-clip提供了一个text属性css 字体颜色，可以将背景裁剪到文字的正面视图上（即只有被文字覆盖的部分才有背景色），然后我们可以将文字颜色设置为透明来实现文本颜色的渐变。 background-clip的text属性仍然是一个实验性功能，需要使用-webkit-background-clip才能生效。



    
        
        text-color-gradient
        
            .text-color-gradient {
                display: inline-block;
                font-size: 10em;
                font-weight: 700;
                background: linear-gradient(0.25turn, #c21500, #ffc500);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
        
    
    
        
            
                Clloz

掩模图像

第二种方法是使用 mask-image 和伪元素来制作渐变描边图层。如果我们的渐变是从颜色A到颜色B，我们可以将文本颜色设置为A，然后使用伪元素（内容与元素文本相同）制作带有mask-image的渐变描边图层。渐变是从透明到颜色 B ，然后我们将伪元素叠加在原始文本上以获得所需的渐变。



    
        
        text-color-gradient
        
            .text-color-gradient {
                display: inline-block;
                font-size: 10em;
                position: relative;
                color: #ffc500;
            }
            .text-color-gradient[data-text]::after {
                content: attr(data-text);
                color: #c21500;
                position: absolute;
                left: 0;
                z-index: 2;
                -webkit-mask-image: linear-gradient(0.25turn, #c21500, transparent);
            }
        
    
    
        
            
                Clloz

关于渐变

推荐一个关于渐变色的网站：uigradients，里面有很多不错的渐变色组合。还有一个软件aquarelo，可以查看渐变色，也支持导入。