CSS 设置渐变背景 CSS 设置渐变边框

这篇具有很好参考价值的文章主要介绍了CSS 设置渐变背景 CSS 设置渐变边框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、css渐变背景添加透明度opacity

css渐变背景经常会在项目开发中遇到,此时UI如果给出的是单一的渐变背景(没有背景透明度),这个我们会很快的写出代码,如下:

CSS 设置渐变背景 CSS 设置渐变边框,css,html,css3

<div class="btn">这是一个按钮</div>
.btn {
  background: linear-gradient(to right, #8B78E6, #50A5A5);
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn:hover {
  background: linear-gradient(to right, #50A5A5, #8B78E6);
}

但偶尔的时候UI会给煎饼的背景色添加一个透明度,但是使用opacity属性会导致文本也会有透明度,接下来给出我的解决办法

.btn {
  position: relative;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 0;
}

.btn:hover {
  background: linear-gradient(to right, #50A5A5, #8B78E6);
}

.btn::after{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.3;
  background: linear-gradient(to right, #8B78E6, #50A5A5);
}

CSS 设置渐变背景 CSS 设置渐变边框,css,html,css3

 二、css按钮添加渐变边框

1、使用border-image

.btn {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

/* 或者 */
.btn {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

2、使用伪元素

CSS 设置渐变背景 CSS 设置渐变边框,css,html,css3

<div class="border-box">
   <div class="content">
        这是一个使用伪元素实现渐变边框的按钮
   </div>
</div>
.border-box {
  border: 1px solid transparent;
  border-radius: 16px;
  position: relative;
  color: #F2B05E;
  background-color: #fff;
  background-clip: padding-box; /*important*/
}

.border-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -1px;
  border-radius: inherit; /*important*/
  background: linear-gradient(to right, #8F41E9, #578AEF);
}

3、使用单个元素background-clip、background-origin、background-image 

.border-box {
  border: 1px solid transparent;
  border-radius: 16px;
  color: #F2B05E;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff,#fff), linear-gradient(90deg, #8F41E9, #578AEF);
}

background-clip 、background-origin属性添加了解释链接,没弄清的童鞋可以点击看下~

分享完毕~~文章来源地址https://www.toymoban.com/news/detail-699373.html

到了这里,关于CSS 设置渐变背景 CSS 设置渐变边框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】透明背景的圆角渐变边框实现方案

    css的渐变边框可以用下面方式实现 css的圆角边框可以用下面方式实现 那想要实现一个圆角的渐变边框呢,可能会以为,两个都用上不就可以了,但事实是,这两个属性并不兼容,所以要实现一个圆角的渐变边框,就得需要曲线救国的方法了 最终效果图    

    2024年02月13日
    浏览(73)
  • 深入理解css3背景图边框

    重点理解 border-image-slice 设置的值将边框背景图分为9份,图像中间的舍弃,其他部分图像对应边框的相应区域放置,上右下左四角固定,border-image-repeat设置的是除四角外其他部分的显示方式。 截图来自菜鸟教程:CSS3 border-image-slice 属性 | 菜鸟教程  背景图像大小 81*81 依据

    2024年02月10日
    浏览(39)
  • 【css技巧】css实现边框渐变

    海鲸AI-ChatGPT4.0国内站点,支持设计稿转代码:https://www.atalk-ai.com 在CSS中实现边框渐变效果,你不能直接应用渐变到 border 属性上,因为CSS标准不支持这样的操作。但是,你可以使用一些技巧来模拟边框渐变的效果。以下是一些常用的方法: 方法1:使用伪元素和 background-ima

    2024年01月23日
    浏览(48)
  • css实现渐变边框动画

    2024年02月15日
    浏览(39)
  • CSS 渐变边框及动画

    转载请注明出处,点击此处 查看更多精彩内容 用 CSS 实现渐变边框及动画,下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。 简单说明原理:使用伪元素 ::before 绘制一个渐变色,然后使用伪元素 ::after 绘制背景,使其遮住渐变色的一部分,仅保留边框部分

    2024年02月16日
    浏览(62)
  • css 边框渐变

    需求: 普通的div 边框不好看,做一个渐变色 进程: 最简单的当然是做一个内部是白色的边框是渐变色的图,然后使用 background: url(\\\"back.jpg\\\") ,这样看起来就像是做了一个渐变的边框 如果做不了图,可以做一个渐变的背景如何用白底把中间的覆盖掉 这个当border 有弧度的时候

    2024年01月18日
    浏览(44)
  • CSS3渐变属性之重复渐变

    在网页设计中,经常会需要在一个背景上重复应用渐变方式的情况,这时就需要使用重复渐变。 概念:重复线性渐变只是在线性渐变的基础上加个repeating,代表连续重复的意思 语法: 说明:该语法用于定义渐变方式为重复线性渐变,括号内的参数取值和线性渐变的相同。 实

    2024年01月18日
    浏览(49)
  • HTML/CSS设置网页背景

    目录 一、HTML设置网页背景 1.基础设置  2.背景颜色 3.背景图片 二、CSS设置网页背景 body 体中 使用 background 和 style 来设置 效果演示 通过style属性: backgroud-color :transparent   color transparent : 背景色透明       color : 指定背景颜色 颜色的表达方式有四种: ①直接写颜色单词 ②

    2023年04月22日
    浏览(51)
  • CSS3 渐变

    CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3渐变有两种类型:线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。 线性渐变(Linear Gradients): 线性渐变沿着一条直线方向进行渐变。可以通过指定起始点(\\\"from\\\")和终止点(\\\"to\\\")之间的颜色过渡来

    2024年02月07日
    浏览(45)
  • 【CSS3】渐变 阴影 遮罩

    1. CSS3渐变 渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片 gradient可以应用在所有接受图像的属性上 1.1 分类: 线性渐变(linear-gradient)变化的方向是一条直线 径向渐变(radial-gradient)变化的方向是

    2024年01月17日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包