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. Docker安装及阿里云镜像加速器配置

    Docker安装 Windows系统安装就不用说了,因为Docker是开源的,所以,直接去官网:https://www.docker.com/下载安装包安装就行了 其实,Linux系统安装也很简单,照 ...

  2. win7 64位系统怎么使用debug

    安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...

  3. 全面概述Gitee和GitHub生成/添加SSH公钥

    前言 现如今将代码开源已经成为软件开发行业的一种趋势,而现在比较有名的代码托管平台有GItHub.Gitee.Gitlab等相关平台.而我们在使用代码托管平台最为常见的就是如何将自己本地的代码推送到远 ...

  4. Android开发之StrictMode

    StrictMode简介 Android开发者官网对StrictMode的介绍 StrictMode类是Android 2.3(API 9)引入的一个工具类 用来帮助开发者发现代码中一些不规范的问题, ...

  5. PMBOK 基础知识(1)

    启动.结束过程 项目管理计划 第一章  引论 第2章项目运行环境 第3章 项目经理的角色 第4章 项目整合管理 第5章 项目范围管理 第6章 项目进度管理 第7章 项目成本管理 第8章 项目质量管理  ...

  6. 面试官:说说Redis的Hash底层 我:......(来自阅文的面试题)

    redis源码分析系列文章 [Redis源码系列]在Liunx安装和常见API 为什么要从Redis源码分析 String底层实现——动态字符串SDS Redis的双向链表一文全知道 前言 hello ...

  7. 微信小程序生命周期,事件

    目录 双线程模型 小程序中 app.js 中的生命周期 小程序的页面的生命周期 小程序的事件 双线程模型 像 Vue 的双向数据绑定 总结: 在渲染层将wxml文件与wxss文件转成js对象,也就是虚 ...

  8. 2.Go--hello world

    编写一个hello world package main import ( "fmt" "time" ) func main(){ fmt.Println(&q ...

  9. <VCC笔记> 推断操作符,映射和量词

    推断操作符 在VCC中,==>符号意味着逻辑推理结果,即离散数学中的蕴涵关系.P==>Q等价于((!P)||(Q)).是非常常用的操作符. 量词(quantifier) 关于量词,这里指的 ...

  10. @codeforces - 594E@ Cutting the Line

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个字符串 s 与正整数 k.现在你需要进行恰好一次操作: ...