`

Flex css (2) 色彩渐变

    博客分类:
  • flex
阅读更多

7、Margins:

 

8、Padding:

 

-.色彩层滤镜:

 

 

<style>
 .myFilter{
  filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#550000FF,endColorstr=#00FFFF00);
  //startColorstr 格式:#AARRGGBB  ,AA表示透明度,后面的是RGB色彩  00是完全透明,FF是不透明
 }
</style>

 

<span class="myFilter" style="width:200px;height:30px;">RR指定红色值</span>

 

二、边界图片滤镜:

.imgFilter{
  //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='geren.jpg',sizingMethod='scale'); //scale,crop,image             //在对象的背景和内容之间显示一张图片,并提供对此图片的剪切和改变尺寸的操作
 }

 

<span class="imgFilter" style="width:233px;height:200px;">RR指定红色值</span>

 

三、透明度滤镜:

.alphaFilter{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=3,finishOpacity=100,style=2);
  //opacity取值0-100(开始透明度),finishOpacity:0-100(结束透明度),startX(渐变开始坐标)
  //startY,finishX,finishY,style取值为0,1,2,3
 }

 

<span class="alphaFilter" style="width:200px;height:30px;">RR指定红色值</span>

 

四、图片处理滤镜:(图片色彩变成灰色

.doImgFilter{
  filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.6,GrayScale=1);
 }

 

<span class="doImgFilter" style="width:200px;height:30px;">RR指定红色值<img src="geren.jpg"></span>

 

五、阴影滤镜:

.shadowFilter{
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color='gray',Positive=true);
  //color:#AARRGGBB,offX(正值向右,负值向左 ,默认为5),offY,positive(true 或者false)
 }

 

<span class="shadowFilter" style="width:200px;height:30px;"><img src="geren.jpg"></span>

 

 

  • 大小: 1.4 KB
分享到:
评论
1 楼 zoutuo 2009-12-08  
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#550000FF,endColorstr=#00FFFF00);

有办法让火狐也支持这个颜色渐变吗?

相关推荐

    CSS常用动画特效,CSS3新增背景CSS代码。颜色渐变,flex弹性布局

    CSS常用动画特效,CSS3新增背景CSS代码。颜色渐变,flex弹性布局,CSS常用动画特效CSS常用动画特效等

    前端领域,运用CSS3实现页面动态效果

    CSS3 是 CSS(级联样式表)的最新版本,它引入了许多新特性,以帮助开发者更轻松地创建复杂的样式和布局。CSS3 提供了许多新的选择器、属性、...它提供了许多新的属性,如 flex-direction、flex-wrap 和 flex-flow 等。

    css入门笔记

    2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色...

    CSS3:CSS3 知识点提炼整理

    CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition &... Gradient 渐变 Animation 动画 Iconfont 字体图标 Less Sass 很多项目和工作中会用到,一定要掌握 Css 规范

    携程网移动端flex布局案例

    携程网移动端首页H5制作,头尾固定,中间自适应,熟练使用flex布局、CSS3样式以及精灵图、渐变色等前端知识点

    数据可视化练习,里面有笔记代码和素材

    应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产...- css3渐变 - css3边框图片 - 原生js + jquery 使用 - rem适配 - echarts基础 粗略代码统计: - css 580行 - html 450行 - js 400行 (有效)

    frontend-101:前端分配可以更好地理解和实践CSS和JAVASCRIPT

    A(CSS) 自适应CSS Flex Box的实践自适应CSS Flex Box的实践自适应CSS Flex Box的实践进行响应式导航使用CSS制作的3D按钮SVG动画用于创建iPhone X主屏幕墙纸CSS渐变使用CSS Clip-Path属性创建动画,如《B...

    flex3的cookbook书籍完整版dpf(包含目录)

    flex3的cookbook书籍完整版dpf(包含目录),目录是我花了两个多小时自己整理的,希望对大家有帮助。 目录: 第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 ...

    Flex Highlighter-crx插件

    语言:English 您是否曾经访问过一个网站,并对自己说:“哇,我想知道CSS样式flex在此上的普及程度如何...颜色甚至具有渐变,因此您可以分辨flex元素的流入方向。使用此全新的扩展名查看网站布局时,请不要再混淆了!

    stkwn#ctrip#移动端布局-携程网-flex布局方式1

    设置背景图的时候,先除3,把background-size设置为除以3之后的。渐变色:

    LeadingEndStudy:前端自学项

    阴影,渐变,滤镜210308 文字特效210309 解决父元素高度坍塌塌陷问题210310 表单美化210311 实用css小集锦210312 Emmet210313 布局练习210314 flex实现⽔平垂直居中的最简单⽅式 flex实现双⻜翼布局 flex实现圣杯...

    backgrounds-and-gradients

    背景和渐变这是使用HTML和CSS3的Apple网站文章页面克隆。原始网站的屏幕截图我们的克隆网站的屏幕截图 该项目使用Html和Css构建,并广泛使用了grid,flex和float css属性。建于HTML CSS3 字体真棒图标现场演示要启动...

    vscode-dashboard:VSCode的类似项目仪表盘的快速拨号

    VSCode项目仪表板 VSCode项目仪表板是Visual Studio Code扩展,可让您以类似... 您可以通过CSS渐变功能(例如线性渐变和径向渐变)将渐变用作项目颜色。 仅使用主题定义的颜色。 因此,仪表板应始终与VSCode设计完美融

    game-portal:带有SCSS的游戏门户

    CSS渐变, 使用CSS flex和网格系统。 使用Google设备工具栏检查了响应设计。 安装Sass 您可以通过下载适用于您操作系统的软件包并将其在Windows,Mac或Linux上安装Sass。 就是这些,没有外部依赖项,也不需要...

    thenextweb-clone:该项目包括创建The Next Web的响应式网站克隆。

    带有2个断点的响应式设计; 媒体查询(768和1024),用于在浏览器更改大小时根据需要实现定位/浮动属性。 两种类型的导航条在每个断点处也会改变; 移动版中的隐藏元素比台式机更干净的设计; 使用flex或grid...

    ahernot.github.io:GitHub Pages网站

    photo-album.css中的4行 添加我的装备页面 添加EXIF水印 添加简介div 去做 在轮播标题下方添加填充 在转盘顶部添加透明容器,在黑暗模式下会变得不透明(在悬停时会变得模糊?悬停时会变得缩放) 在轮播字幕后面添加...

    http-otavio-.github.io:Aplicando efeito de Glassmorphism

    Aplicando efeito de Glassmorphism Parte do CSS do projeto * {margin:0; 填充:0; 框大小:border-box; 字体家族:“ Poppins”,无衬线; } body {display:flex; 证明内容:中心; align-items:居中; 最低...

    layout-restaurant:滚动范围学校作业

    您应该为悬停事件实现CSS样式效果(使用哪种效果取决于您,例如,导航按钮的颜色可以在悬停时改变) 滚动时,标题可以固定在渐变背景上 请注意以下事实:背景应该是图形样式,而不仅仅是纯白色 您可以使用任何所...

Global site tag (gtag.js) - Google Analytics