`
qu_xiangjun805
  • 浏览: 20261 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS 显示渐变

阅读更多
css一些东西(这里主要有一个方法就是背景渐变,一般我们处理的时候是用图片)

1. css导入:
       第一种是把CSS文档放到<head>文档中:
    <style type=“text/css”> …… </style>
    其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。

  第二种方法是把CSS样式表写在HTML的行内,比如下面的代码:
    <p style=“font-size:14pt;color:blue”>蓝色14号文字</p>
    这是采用<Style=“ ”>的格式把样式写在html中的任意行内,这样比较方便灵活。

     第三种方法是:把您编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。定义的格式是这样的:
        <head> <link rel=stylesheet href=“style.css”> …… </head>
        我们看到这里应用了一个<Link>,“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般这里
             是不 需 要您改动的。
        而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去
             就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余
             代码。
  第四种,<!--#include file="/temp/Css.aspx"-->,把他放到<head>中,不过Css.aspx文件得包括在<style type=“text/css”
               >   …… </style> 中。
2.   今天又在网上学了一招,可以让控件变成颜色渐变的
       <style type="text/css">
        <!--
        .test{FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='white', endColorStr='red', gradientType='1');}
        -->
         startColorStr是开始颜色;endColorStr是结束颜色;gradientType,0是从上到下,1是从左到右


3.   哦,还有,
      .tableborder
       {
         /*这个为自定义的选择符,注意它前面的 . 这是自定义的方法!*/
         background-color: #E1FDEE; /*背景颜色*/
         border: 1px solid #FF0000;

         }
      在调用自定义选择符时,只要在它的HTML标记中加入 class="tableborder"(此为你自定义的选择符的名字) 即可。




渐变例子:

用css实现网页背景渐变的代码



一、站长资网您(www.chinahtml.com)从上往下渐变
Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}



二、站长资网您(www.chinahtml.com)从左上至右下渐变
Example Source Code:
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}



三、从左往右渐变
Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}



四、站长资网您(www.chinahtml.com)从上往下渐变
Example Source Code:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"




CSS滤镜:颜色渐变[微软的方法] 
<table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
  <tr>
  <td id="msviRegionIdGraphic" bgcolor="#FFFFFF"></td>
  <td id="msviRegionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
  <td id="msviRegionGradient2" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#98B2E6', endColorStr='#3568CC', gradientType='1')"></td>
  </tr>
</table>
分享到:
评论

相关推荐

    前端工具 - CSS3渐变效果源码

    3. 修改完毕后,生成的CSS代码会显示在特定区域,用户可以直接复制并粘贴到自己的CSS文件中。 `css` 文件夹可能包含该工具的样式表,用于控制界面布局和样式;`images` 文件夹可能存储了工具中用到的图标或示例图像...

    css3渐变进度条加载动画特效

    **CSS3渐变进度条加载动画特效详解** 在网页设计中,进度条是常见的交互元素,用于指示某个任务的完成进度。随着技术的发展,CSS3引入了许多新的特性,使得我们可以创建出更加美观且动态的进度条动画效果。本篇文章...

    CSS3渐变效果

    SS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的...

    HTML5 css3渐变按钮代码.rar

    3. 考虑浏览器兼容性:虽然大部分现代浏览器支持CSS3渐变,但为了确保在旧版本或非主流浏览器中也能正常显示,可能需要添加浏览器特定的前缀,如`-webkit-`、`-moz-`等。 4. 动态效果:虽然这个例子未使用...

    css3棕色渐变导航菜单 css3棕色渐变导航菜单网页特效.zip

    本篇文章将详细讲解如何利用CSS3来制作一个棕色渐变的导航菜单,同时也会提及JavaScript和jQuery在实现交互性中的作用。 首先,我们从HTML5的基础结构开始。一个简单的导航菜单通常由`&lt;nav&gt;`元素和一系列`&lt;ul&gt;`、`...

    可视化CSS3渐变背景颜色代码生成插件

    【可视化CSS3渐变背景颜色代码生成插件】是一个便捷的工具,专为网页开发者设计,旨在简化CSS3线性渐变背景的创建过程。这款插件提供了直观的图形界面,用户可以通过操作不同参数,实时预览并生成相应的CSS3代码。 ...

    jquery+css3渐变显示“更多”隐藏内容

    标题中的“jquery+css3渐变显示“更多”隐藏内容”指的是使用JavaScript库jQuery和CSS3的过渡效果来实现一种动态展示隐藏文本的功能。当用户点击“更多”按钮时,原本被隐藏的文字会逐渐显现出来,给用户带来平滑的...

    css3文字模糊渐变效果zip

    在CSS3中,文本模糊渐变效果是一种富有创意和视觉吸引力的设计技巧,它可以使文本呈现出从清晰到模糊的过渡效果,增加网页的动态感和艺术性。本篇将深入探讨如何利用JavaScript(JS)和CSS3来实现这种效果,并通过...

    纯css3背景渐变按钮特效.zip

    "纯css3背景渐变按钮特效.zip" 这个标题指的是一个使用纯CSS3技术实现的、带有背景渐变效果的按钮特效的压缩包文件。CSS3是层叠样式表的第三版,它引入了许多新的特性和功能,其中就包括丰富的颜色过渡和渐变效果。...

    jQuery+css3渐变焦点图 jQuery+css3渐变焦点图网页特效.zip

    标题中的“jQuery+css3渐变焦点图”指的是一...总的来说,"jQuery+css3渐变焦点图"是一个结合了前端技术的动态网页元素,通过JavaScript和CSS的协同工作,实现了吸引人的图片展示效果,同时考虑到用户体验和网页性能。

    css背景样式渐变代码

    - **重复渐变**:可以使渐变图案重复显示,形成特定的纹理效果。 例如,创建一个从中心向外扩展的径向渐变: ```css div { background-image: radial-gradient(circle at center, green, gold); } ``` ### 结论 ...

    4种CSS3颜色渐变的导航菜单效果.rar

    在本资源中,"4种CSS3颜色渐变的导航菜单效果.rar" 是一个包含四种不同CSS3颜色渐变导航菜单实现的压缩包文件。这个压缩包可能包含了HTML和CSS文件,用于展示如何利用CSS3的新特性来创建动态且吸引人的网页导航菜单...

    jquery+css3渐变显示“更多”隐藏内容.zip

    标题中的"jquery+css3渐变显示“更多”隐藏内容.zip"揭示了这个压缩包包含了一个结合了jQuery和CSS3技术实现的交互效果,具体是用于渐变显示和隐藏页面上的“更多”内容。这个效果可能常用于文章摘要、产品列表或者...

    css3渐变头部导航.zip

    "css3渐变头部导航.zip"这个压缩包文件,显然着重于利用CSS3的特性来创建一个具有渐变效果的头部导航栏。下面我们将详细探讨相关的知识点。 1. **CSS3 渐变**: CSS3支持线性渐变(linear-gradient)和径向渐变...

    CSS3 渐变(Gradients)之CSS3 线性渐变

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的...

    纯css3渐变进度条动画特效.zip

    - 为了确保在不同设备和屏幕尺寸上都能正常显示,纯CSS3的进度条动画可能考虑了媒体查询(media queries),以便根据视口大小调整布局。 5. **可定制性**: - 这个特效代码可以进行二次修改,意味着它提供了足够...

    html+css蓝色渐变大气的网页模板

    1. 渐变效果:CSS3引入了渐变功能,允许创建线性渐变(`linear-gradient`)或径向渐变(`radial-gradient`)。这个模板可能使用了这两种渐变来实现蓝色背景的过渡效果,通过调整角度、颜色点和位置,营造出大气的...

    懒人原生纯css3单色渐变至透明效果

    在我们的网页里,经常碰到这样的情况:宽度不固定,但是我们又需要渐变的颜色来显示,通常是用一个背景图片重复,缺点就是无法控制宽度问题,作为一个不喜欢用图片的人来说,简直无法忍受啊。现在好了,完全可以...

    兼容各浏览器css渐变

    然而,不同浏览器对于CSS渐变的支持程度不一,这使得开发者需要采取一些策略来确保渐变效果能够在各种浏览器中正常显示。本文将详细介绍如何实现兼容各浏览器的CSS渐变效果。 #### CSS渐变的基本概念 CSS渐变是一...

    CSS 文字渐变器 代码,效果一起搞定!

    本篇文章将详细探讨如何使用CSS来实现文字渐变效果,并结合提供的"ColorText V2210"代码生成器,帮助您轻松实现这一高级视觉效果。 首先,我们了解CSS中的渐变。在CSS3中,有两种主要类型的渐变:线性渐变和径向...

Global site tag (gtag.js) - Google Analytics