css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考!

1、css背景颜色渐变

代码:

<style>
.content_bg{
width:600px;max-width: 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#fff;
background-image:linear-gradient(left, #eef2be,#f2441f);
background-image:-webkit-linear-gradient(left, #eef2be,#f2441f);
background-image:-moz-linear-gradient(left, #eef2be,#f2441f);
background-image:-o-linear-gradient(left, #eef2be,#f2441f);
background-image:linear-gradient(left, #eef2be,#f2441f);
}
</style>
<div class="content_bg">css背景颜色渐变</div>

  

效果:

css背景颜色渐变

2、文字颜色渐变

代码:

<style>
.content_txt {
width:600px;max-width: 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;
background-image:-webkit-linear-gradient(left, #eef2be,#f2441f);
background-image:-moz-linear-gradient(left, #eef2be,#f2441f);
background-image:-o-linear-gradient(left, #eef2be,#f2441f);
background-image:linear-gradient(left, #eef2be,#f2441f);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
</style>
<div class="content_txt">css文字颜色渐变</div>

  

效果:

css文字颜色渐变

3、边框颜色渐变

代码:

.content_border {
width:600px;max-width: 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#888;
border: 10px solid;
border-image: -webkit-linear-gradient(#eef2be,#f2441f) 30 30;
border-image: -moz-linear-gradient(#eef2be,#f2441f) 30 30;
border-image: linear-gradient(#eef2be,#f2441f) 30 30;
}
</style>
<div class="content_border">css边框颜色渐变</div>

资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh

效果:

css边框颜色渐变

css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的更多相关文章

  1. CSS3 实现背景透明,文字不透明,兼容所有浏览器

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>opac ...

  2. CSS3实现背景透明,文字不透明

    最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度. <!DOCTYPE html> < ...

  3. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  4. Android开发---如何操作资源目录中的资源文件3--圆角边框、背景颜色渐变效果、边框颜色

    Android开发---如何操作资源目录中的资源文件3 效果图 1.圆角边框 2.背景颜色渐变效果 1.activity_main.xml 描述: 定义了一个shape资源管理按钮 <?xml ...

  5. css盒子模型之边框宽度,边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  6. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  7. CSS3实现背景颜色渐变 摘抄

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  8. android Button 切换背景,实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  9. 如何通过CSS3实现背景图片色彩的梯度渐变

    随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验. 通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言 ...

随机推荐

  1. Java实现第八届蓝桥杯杨辉三角

    杨辉三角 杨辉三角也叫帕斯卡三角,在很多数量关系中可以看到,十分重要. 第0行: 1 第1行: 1 1 第2行: 1 2 1 第3行: 1 3 3 1 第4行: 1 4 6 4 1 - 两边的元素都是 ...

  2. Android开发项目中常用到的开源库

    圆形头像 https://github.com/hdodenhof/CircleImageView ButterKnife https://github.com/JakeWharton/butterk ...

  3. Servlet Session MVC模式

    一   什么是Session 当首次使用session时,服务器端要创建session,session是保存在服务器端,而给客户端的session的id(一个cookie中保存了sessionId). ...

  4. Flask flush 闪现

    闪现 要用必须导入 flash , get_flashed_messages flash 用于存闪现的值.他有两个参数,1 messsage,用来存储信息 2 category ,用于给信息分类,该参 ...

  5. 5、react-路由

    1.单页面:(只有一个index.html)(为什么要使用react-router再react中) 所有的组件都是再同一个index.html中进行显示的,它再显示的时候是怎么显示的,通过你点击的连接 ...

  6. Unable to open debugger port (127.0.0.1:55119): java.net.SocketException "Socket closed"

    1.端口问题 排查端口,lsof -i:8080 修改端口等 2.权限问题 端口排查无解的话,查看idea Event Log(View->Tool Window->Event Log) ...

  7. throws,throw,try,catch,finally 分别代表什么 意义?

    Java通过面向对象的方法进行异常处理,把各种不同的异常进行分类,并提供了良好的接口. 在Java中,每个异常都是一个对象,它是Throwable类或其它子类的实例.当一个方法出现异常后便 抛出一个异 ...

  8. windows server2012 安装SQL SERVER 2016环境监测出错

    Windows Server 2012 R2 安装SQL Server 2016 顺序为:KB2919442 ——> KB2919355 ——> SQL Server 2016 并且还要安 ...

  9. laravel向视图传递变量

    向视图中传递变量 我们在开发web应用当中,通常都不是为了写静态页面而生的,我们需要跟数据打交道,那么这个时候,问题就来了,在一个MVC的框架中,怎么将数据传给视图呢?比如我们要在 ArticleCo ...

  10. 7.kubernetes集群版本升级

    1.查看原集群的Node节点的版本号 [root@hdss7-22 opt]# kubectl get node -o wide 2.将要升级的kubernetes版本上传到node节点上并解压(v1 ...