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实现 LeetCode 4 寻找两个有序数组的中位数

    寻找两个有序数组的中位数 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...

  2. CSDN账号被冻结了怎么办

    CSDN可能因为你的博客里有一些网站链接给你判断为恶意推广广告,冻结, 或者和我一样,在评论区刷屏被冻结, 联系客服即可,向客服提供你的绑定邮箱或绑定手机号,或博客id,客服会给你解冻 PS: 找不到 ...

  3. java实现第四届蓝桥杯三部排序

    三部排序 题目描述 一般的排序有许多经典算法,如快速排序.希尔排序等. 但实际应用时,经常会或多或少有一些特殊的要求.我们没必要套用那些经典算法,可以根据实际情况建立更好的解法. 比如,对一个整型数组 ...

  4. Python:求时间差(天时分秒格式)

    传入一个时间戳,以天时分秒格式打印出时间差 输入一个10位的时间戳,求出时间差 def time_diff(timestamp): onlineTime = datetime.datetime.fro ...

  5. 使用liunx系统自带的工具sar监控指定接口速率

    1.路由器双出口部署,接口可以实现负载分担,在接口负载比例设置为1:2之后,管理员反馈流量有些异常,内网tracert -d 外网域名或者IP,都走一条链路. 2.底层尝试使用sar命令监控两个接口的 ...

  6. 从linux源码看socket(tcp)的timeout

    从linux源码看socket(tcp)的timeout 前言 网络编程中超时时间是一个重要但又容易被忽略的问题,对其的设置需要仔细斟酌.在经历了数次物理机宕机之后,笔者详细的考察了在网络编程(tcp ...

  7. Java学习之多线程详解

    一.多线程的实现 1.继承Thread类 ​ a.子类继承Thread类具备多线程能力 ​ b.启动线程:子类对象.start() ​ c.不建议使用:避免OOP单继承局限性 package com. ...

  8. LAMP建站简介

    1. LAMP概述 1.1 为什么是LAMP LAMP无非就是Linux+Apache+MySQL+PHP的网站架构体系而已.而之所以叫LAMP,就是取了这几个单词的首字母罢了,但这里的P可以指PHP ...

  9. 用python简单爬取一个网页

    1打开编辑器 2撸几行代码 import urllib.request import urllib.error def main(): askURl("http://movie.douban ...

  10. IP地址和端口

    IP地址是网络中计算机的唯一标识.没有IP地址,计算机无法接入互联网. IPv4地址32bit,用点分十进制表示,如202.38.64.3 IPv6地址128bit,用冒号分割十六进制表示,如2001 ...