css之透明度和外发光

今天用到了CSS中的透明度和外发光，分享一下，希望能帮到大家

透明实例

<div class="box"></div>
<style>.box{width:300px; height:200px;margin:0 auto; boxder:1px solid #ccc; background:#000;filter:alpha(opacity:30);      //这是一个针对IE浏览器opacity:0.3;                   //值为1时，完全不透明，为0时完全透明，opacity为css的现代标准，适用于绝大浏览器
</style>

如图：

外发光实例

<style>
.aa:HOVER{-webkit-transition:-webkit-box-shadow linear .05s;
//transition的过渡，对阴影部分的逐步过渡，还可以用 border linear .2s ，这是说border属性的逐步过渡，两个设置之间用 , 分隔border-color:rgba(25,39,142,.5);
//rgba（a，b，c，d），前三位凑成颜色，而第四位则是透明度 -webkit-box-shadow:0 0 20px rgba(251,56,15,365);
//box-shadow：x y 10px rgba（a，b，c，d），x y分别是阴影的方向， 然后是阴影蔓延距离，最后则是阴影部分的颜色； }
.aa{height: 100px;width: 100px;}
</style>
<div><input type="text" class="aa"/>
</div>

如图：

自己写的，如有错误，还望路过大佬指点和海涵

css之透明度和外发光相关推荐

css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法
css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度 ...
css字体设置透明度,CSS字体透明度怎么设置？
在css中有很多好看的样式都可以实现,css设置出来的样式让整个网页看起来也会非常美观,今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度,让你的字体在网页中看起来是透明的. 在css3中 ...
css实现透明度（兼容IE6、火狐等）
具体代码: filter:alpha(opacity=50); //兼容ie opacity:0.5; //其他浏览器若此层内的图片等不能实现透明度,只需要在此元素的上层元素(即父元素)设置 ...
用css实现透明度的方法
最近碰到一个实现圆角背景透明的问题,今天研究了一下,总结了两种方法: 1用定位的方法实现html代码如下 <div class="container"> <div ...
CSS字体透明度怎么设置？
在css中有很多好看的样式都可以实现,css设置出来的样式让整个网页看起来也会非常美观,今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度,让你的字体在网页中看起来是透明的. 首先小编在这 ...
css背景透明(css背景透明度怎么设置)
CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/ 内层div: backgroun ...
css设置透明度的两种方法
一.css rgba()设置颜色透明度语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...
html css表格透明度,【总结】CSS透明度大汇总_html/css_WEB-ITnose
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
CSS 不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度. 透明图像 opacity 属性的取值范围为 0.0-1.0.值越低,越透明: 透明悬停效果 opacity 属性通常与 :hover 选择器一同使用, ...

css之透明度和外发光

css之透明度和外发光相关推荐

最新文章

热门文章