蜗小牛
- 浏览: 63760 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
/*-----------由左至右渐变-------------*/
body{ width:100%; height:105px; margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=1); /*IE*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=1); /*IE8*/
background:white; /* 一些不支持背景渐变的浏览器 */
background:-o-linear-gradient(left,#00108B 0%,white); /*opera*/
background:-moz-linear-gradient(left, #00108B, white); /*firefox*/
background:-webkit-gradient(linear, left top, right top, from(#00108B), to(rgba(0, 0, 255, 0)));} /*chrome,safari*/
background:-ms-linear-gradient(left, #00108B, white);}/*IE10*/
/*-----------由上至下渐变-------------*/
body{ width:100%; height:105px; margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=0); /*IE*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=0); /*IE8*/
background:white; /* 一些不支持背景渐变的浏览器 */
background:-o-linear-gradient(top,#00108B 0%,white); /*opera*/
background:-moz-linear-gradient(top, #00108B, white); /*firefox*/
background:-webkit-gradient(linear, 0 0, 0 500, from(#00108B), to(rgba(0, 0, 255, 0)));} /*chrome,safari*/
background:-ms-linear-gradient(top, #00108B, white);}/*IE10*/
body{ width:100%; height:105px; margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=1); /*IE*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=1); /*IE8*/
background:white; /* 一些不支持背景渐变的浏览器 */
background:-o-linear-gradient(left,#00108B 0%,white); /*opera*/
background:-moz-linear-gradient(left, #00108B, white); /*firefox*/
background:-webkit-gradient(linear, left top, right top, from(#00108B), to(rgba(0, 0, 255, 0)));} /*chrome,safari*/
background:-ms-linear-gradient(left, #00108B, white);}/*IE10*/
/*-----------由上至下渐变-------------*/
body{ width:100%; height:105px; margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=0); /*IE*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=0); /*IE8*/
background:white; /* 一些不支持背景渐变的浏览器 */
background:-o-linear-gradient(top,#00108B 0%,white); /*opera*/
background:-moz-linear-gradient(top, #00108B, white); /*firefox*/
background:-webkit-gradient(linear, 0 0, 0 500, from(#00108B), to(rgba(0, 0, 255, 0)));} /*chrome,safari*/
background:-ms-linear-gradient(top, #00108B, white);}/*IE10*/
分享到：
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1267<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 621CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1050script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 649该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19211。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1947浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 771有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1231<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 660对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1956开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 599进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 961<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 579■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 450<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 552很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1010CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 517定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1248{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 617<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 788所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
CSS实现背景颜色渐变，通过CSS滤镜使背景渐变，特殊情况下值得考虑的一个方案~
总结，CSS背景色渐变是一个强大的设计工具，通过灵活运用线性渐变、径向渐变、颜色透明度和重复渐变等特性，我们可以创造出各种独特的网页视觉效果。学习并掌握这些技巧，将有助于提升网页设计的专业性和创新性。在...
CSS 设计指南学习小结
【CSS背景颜色例子】 在网页设计中，CSS（层叠样式表）是用于控制网页元素样式的核心技术之一，包括字体、布局、颜色等。本文将深入探讨如何使用CSS设置背景颜色，以创建丰富的视觉效果。 1. 背景颜色的基本语法 ...
**CSS3文字颜色渐变和文字阴影特效** 在现代网页设计中，CSS3已经成为不可或缺的一部分，它提供了许多新的特性和功能，使得网页的视觉表现力更加强大。本主题聚焦于CSS3中的两个重要特性：颜色渐变和文字阴影，它们...
【标题】"纯CSS3实现的背景颜色渐变动画特效源码"，这个主题涉及到的是CSS3中的一个重要特性——颜色渐变（Gradient）以及动画（Animation）。CSS3的颜色渐变允许开发者创建平滑过渡效果，从一种颜色逐渐过渡到另一...
在本文中，我们将深入探讨如何使用CSS3来创建平滑过渡的渐变背景颜色效果，主要涉及CSS3的圆形渐变和线性渐变。这些技术不仅为网站设计增加了视觉吸引力，还能提升用户体验，使页面元素在状态变化时更加平滑自然。 ...
本篇将深入探讨如何使用纯CSS3的gradient颜色渐变来创建立体文字特效。 首先，让我们理解CSS3中的两种主要类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。线性渐变沿着一个方向平滑地过渡...
- **径向渐变**：可以创建一个从中心点向外扩散的颜色渐变。 - **角度渐变**：允许指定渐变的方向角度，实现更为自由的设计。 - **重复渐变**：可以使渐变图案重复显示，形成特定的纹理效果。 例如，创建一个从中心...
在CSS3中，渐变颜色色板是一种强大的设计工具，它允许开发者创建平滑过渡的颜色效果，从而为网站和应用程序增添视觉吸引力。本资源提供了15种不同的渐变颜色色板，利用CSS3的`gradient`属性实现。下面将详细阐述CSS3...
Mask属性通过遮罩层来控制内容的显示区域，可以使用图像、颜色渐变、径向渐变等方式来创建遮罩效果。在这里，通过-webkit-gradient创建一个线性渐变的遮罩，并将其应用在文字上，可以实现文字的渐变效果。 ### 渐变...
这个小例子讲解了在不同浏览器下用css为元素做渐变背景的方法，希望能够对大家有所帮助。
首先，颜色渐变是CSS3中的一个重要特性，它允许我们创建出平滑过渡的颜色效果。通过`background-image`属性，我们可以设置背景为线性渐变（linear-gradient）或径向渐变（radial-gradient）。例如，创建一个从红色到...
在CSS3中，网页设计者可以利用一系列新特性来创建出引人注目的动态效果，其中就包括网页动态渐变背景动画特效。本教程将深入探讨如何使用CSS3实现这样的特效，尤其是如何设置多种渐变颜色，从而为网页增添丰富的视觉...
在本资源中，"4种CSS3颜色渐变的导航菜单效果.rar" 是一个包含四种不同CSS3颜色渐变导航菜单实现的压缩包文件。这个压缩包可能包含了HTML和CSS文件，用于展示如何利用CSS3的新特性来创建动态且吸引人的网页导航菜单...
这里我们将深入探讨“CSS常用动画特效”、“CSS3新增背景CSS代码”、“颜色渐变”以及“flex弹性布局”这四个关键知识点。 首先，我们来看“CSS常用动画特效”。CSS3引入了`@keyframes`规则，允许开发者创建复杂的...
颜色渐变是CSS3引入的一种新特性，允许我们在背景、边框甚至文本上创建平滑的颜色过渡。渐变分为线性渐变和径向渐变两种类型。线性渐变沿着一个方向平滑过渡，而径向渐变则以中心点向外辐射。 在创建颜色渐变菜单时...
【可视化CSS3渐变背景颜色代码生成插件】是一个便捷的工具，专为网页开发者设计，旨在简化CSS3线性渐变背景的创建过程。这款插件提供了直观的图形界面，用户可以通过操作不同参数，实时预览并生成相应的CSS3代码。 ...
CSS 渐变（Gradients）是网页设计中一种常见的视觉效果，...总的来说，CSS背景渐变为网页设计增添了丰富的视觉层次感，而理解和掌握不同方式的渐变实现，可以帮助开发者更好地创造出美观且适应多浏览器环境的网页设计。