透明度css

FLEX3中应用CSS完全详解手册!

前提是你 提交于 2020-04-06 21:46:14
编辑完这个 FLEX 下的CSS说明后,我基本已经兵临崩溃边缘了。在些天在AIRIA下了不少好东西,今天终于有空,也发一个比较不错的东西给大家,相信都比较需要这个FLEX下的CSS使用方法的详细说明(好像我这份还不够详细,望大家补充)。 AIRIA真的是一个不错的网站,很高兴在这里认识大家。 在FLEX中使用样式方法 一、使用本地样式定义 使用<mx:Style>标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定 义。这些定义会应用到当前文档以及当前文档的子文档。 <mx:style> .solidBorder{//类选择样式 border-style:solid; } button{//组件定义样式 border-style:solid; } .... </mx:style> //应用到组件 <mx:VBoxstyleName="solidBorder"/> <mx:button/>//文档中的button自动应用样式表中的样式 二、使用外部样式表 FLEX支持外部CSS样式表。要应用一个样式表到当前文档和子文档,使用<mx:Style>标签中的source 属性。 <mx:Application...> <mx:Stylesource="style/style.css"/>//载入外部样式表 ... </mx:Application>

CSS实现HTML元素透明的那些事

旧街凉风 提交于 2020-03-30 20:41:55
CSS实现HTML元素透明的那些事 CSS3草案中定义了 {opacity:<length> | inherit;} 来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性 filter 来实现的,所以HTML元素的透明效果已经无处不在了。首先看看 A级浏览器 所支持的用 CSS实现元素透明的方案 : 浏览器 最低 版本 方案 Internet Explorer 4.0 filter: alpha(opacity=xx); 5.5 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); 8.0 filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; Firefox (Gecko) 0.9 (1.7) opacity Opera 9.0 opacity Safari (WebKit) 1.2 (125) opacity 实际上在IE8中,-ms

CSS 图像透明/不透明

痴心易碎 提交于 2020-03-26 06:03:41
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 注意: CSS Opacity属性是W3C的CSS3建议的一部分。 一、示例一:创建一个透明图像 CSS3中属性的透明度是 opacity 。 首先,我们将向您展示如何用CSS创建一个透明图像 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。 IE8和早期版本使用滤镜:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。 二、示例二:图像的透明度 - 悬停效果 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ } 第一个CSS块是和例1中的代码类似。此外,我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图片是清晰的。 此CSS是: opacity=1 .

如何写出优雅的css代码 ?

拈花ヽ惹草 提交于 2020-03-08 08:02:10
如何写出优雅的css代码 ?    对于同样的项目或者是一个网页,尽管最终每个 前端开发工程师 都可以实现相同的效果,但是他们所写的代码一定是不同的。有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护;而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了。那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正。 如何整理一个项目。 如何写出清晰易懂的HTML代码。 如何写出优雅的css代码(重点)。 第一部分:如何整理一个项目。    当我们接手一个表白墙的小项目时,怎么去分类整理呢?是把所有的html文件、css文件、js文件和图片等等混乱的放在一起?好吧,那就看看这样是什么效果吧?    可能你会觉得这没有什么啊?文件都可以找到啊,但是你试图在sublime编辑器中打开看看是什么效果:   ( 补充说明:博友@Tabweng 建议文件名不要使用中文而尽量使用英文,在此表示感谢,希望大家也可以注意这个问题。 )    有没有觉得很混乱呢?! 此外,如果项目更大了呢?你需要的html文件、css文件、js文件、以及图片的需求量更大了呢?你还能保证可以顺利的找出每一个你想要的文件并编辑吗?显然显然是否定的。所以对于这种项目

12有趣的CSS文字阴影代码示例

与世无争的帅哥 提交于 2020-02-25 20:03:39
排版是每个人都喜欢的网页设计玩具。一个特别有趣的工具,CSS让你玩你的类型是 文字阴影 ,这看起来很简单,但可以用来创造一些显着的效果与一点创造力和创造力。 今天我们将运行几个 文本阴影 示例,您可以为自己的工作复制和粘贴。 基本阴影 该 文字阴影 属性是超级易于使用,并在所有运行良好 的现代 浏览器,甚至没有这么多的供应商名称!但是,使用Modernizr之类的工具,即使在旧版浏览器中也能帮助您降低高级CSS3效果,如果您需要后备支持。 句法 创建简单 文本阴影 的语法如下所示。你有四个变量可以使用,前两个设置你的阴影的位置,第三个设置模糊量和第四个阴影的颜色。 1 text-shadow: horizontal-offset vertical-offset blur color; 这样做就是一个例子,它的一个阴影已经向下移动了两个像素,右边是四个像素,三个像素的模糊,黑色的颜色是30%的不透明度。 1 text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 这是这个代码的结果,一个很好的简单的阴影,它本身是非常有吸引力的。 新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。 为什么是rgba? 作为一个快速的注释,您不必使用rgba的阴影的颜色

hexo自定义css样式

荒凉一梦 提交于 2020-02-18 16:47:45
文章目录 自定义CSS部分 彩色标签 心形转动分类 底栏修改 配置文件解释 站点配置文件 主题配置文件 个人博客 https://www.renke666.top 尽管在配置文件中做了修改美化了博客,但原有样式还是比较简陋,修改的话就需要自定义CSS样式。这也算是美化博客的一大步进展吧,踩了很多坑。 这篇算是博客的美化部分暂时完结之作,花了很多的精力去美化,整体从十二月初断断续续的忙,寒假初期忙了会也算是忙了有两个月吧。果然写博客不是关键,捣鼓才是关键,中间还是学到挺多也挺值得的。然而慢慢捣鼓发现还有很多很多新鲜神奇的东西,目前也没有太多时间,暂且放一边。以后就专心写点东西放上来了,在电脑上写有时东西一多一乱就不好找,这下也算有个地方可以聚合一下。 首先需要HTML+CSS+JS基础,在修改样式时参考了很多博客好的样式,也学到了很多,中间踩了很多坑,基础很关键。回顾前面的美化过程其实走了很多弯路,最好是在有基础的情况下,然后把配置文件详细搞清楚,再大概了解 \themes\next\layout 部分的 .swig 文件的具体格式和用法就能完成的很快,且可以较轻松的自定义各布局。 新版本的hexo自定义CSS需要在 \themes\next\source\css\main.styl 中 // Custom Layer 之后也就是最后增加自己自定义的CSS 写HTML和CSS用

CSS渐变效果

[亡魂溺海] 提交于 2020-01-08 03:20:28
很炫的CSS渐变效果 Code <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> < title > css渐变效果 </ title > </ head > < body > < div style ="FILTER:alpha(opacity=30 finishopacity=0 style=1) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); VERTICAL-ALIGN: middle; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 300px; PADDING-TOP: 4px; BORDER-BOTTOM: #f3f3f3 1px solid;

CSS 阴影动画优化技巧

廉价感情. 提交于 2020-01-06 23:26:52
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> box-shaodw 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这样一个盒子: div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候,盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 过渡到 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) OK,最简单的方法当然是: div:hover { width: 100px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } 专门建立的学习Q-q-u-n ⑦③①-⑦⑦①-②①① 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划) 因为过渡动画是在两个不同的盒阴影状态在发生,所以在过渡动画的时间内,浏览器会不断的重绘盒阴影

WEB前端 -- CSS

这一生的挚爱 提交于 2019-12-29 01:25:51
一、CSS介绍 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。 存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。 语法:style = 'key1:value1;key2:value2;' 在标签中使用 style='xx:xxx;' 在页面中嵌入 < style type="text/css"> </style > 块 引入外部css文件 必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。 二、CSS的基本概念   层叠样式表   CSS样式表 三、CSS的书写的方式 3.1、行内样式   <div style="color:yellow"></div> 3.2、内部样式 head标签中   <style>   标签选择器    div{   color:red;   }   ID选择器   #id{   font-size:12px   }   类选择器   .class{    font-size:12px   }   组合选择器   包含选择器   div span{   }   <div>   <span>   </span>    </div>   分组选择器   div,span{   }   * --通用选择器   *{   color:red;   }  

js实现放大镜效果

孤街浪徒 提交于 2019-12-24 07:42:09
js实现放大镜效 首先放大镜的原理,通过调整移动距离比例,由左方小图片中移动小方框,显示右边提前设置好的窗口中放大的局部图片(图片可以自己去网上找,最下方小编会放入原代码,略微修改图片地址和css宽高便可使用) 首先我们先搭出html结构 设置两个盒子左小右大,左边盒子与图片大小一致即可(也可以自己设置),分别放入图片(自己随意添加),再向第一个盒子中写入一个小盒子,方便后面做拖动显示哪一部分。 第二部搭建css 这是笔者设置的css,需要注意的点是要设置盒子1中small的透明度方便可以看见盒子1的最底层图片,盒子2设置宽高,设置溢出隐藏,将多余部分隐藏,小编这里在js最后设置了鼠标移入显示粉色区域和盒子2,因此可能只写html和css效果不太明显, 第三部,则是实现js部分,通过移动左边小框来同步实现右边图片等比例向反方向移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; } body{ font-size:0; } #box1{ width:350px; height:350px; float:left; position:relative; } #box2{ width:400px;