css3透明效果和圆角问题

问题描述

有没有一种方法让所有浏览器技能兼容透明效果又能圆角的?我尝试了几种方式发现这两种效果不能同时让所有浏览器同时兼容,请教高手

解决方案

解决方案二:
ie8及以下不支持圆角不知道你说的透明是什么?png透明还是阿尔法透明?ie支持gif透明和阿尔法透明(需要滤镜支持)
解决方案三:
透明效果:css3支持的透明效果如:rgba(1551551550.3)此方式也是ie9以下不支持但是可以使用css2Opacity:0.3;此时如果使用了这种方式css3的圆角效果就消失了
解决方案四:
这是一款在线CSS3圆角工具,四个角输入值就能生成对应的效果和代码。→访问BorderRadius.com

时间: 2024-08-01 15:21:06

css3透明效果和圆角问题的相关文章

CSS3 HTML5使用 RGBA 实现透明效果实例

目前,Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者),在 CSS3,可以直接实现透明效果. rgba(200, 54, 54, 0.5); background: rgba(200, 54, 54, 0.5); color: rgba(200, 54, 54, 0.5); color: #000; opacity: 0.5; 支持的浏览器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacit

用js实现css3效果的圆角方法

找在IE下实现css3效果的圆角时找到的一个实例,没有测试,不知道使用起来怎么样,有兴趣的朋友可以自己试一下: 复制代码代码如下:<!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/199

使用css3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能:     <div style="background-color:

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载 源代码(只是写了moz下的效果,we

CSS3设计动态立体盒子:CSS3透明水晶盒

文章简介:纯CSS3透明水晶盒. 相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载 源

兼容ie和firefox css alpha实现透明效果

为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果.  代码如下 复制代码 filter:alpha(opacity=50);       /* IE */ -moz-opacity:0.5;              /* Moz + FF */ opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/ IE使用私有属性filter:alpha(opacity),Moz

CAGradientLayer实现图片渐变透明效果

CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (n

使窗体拥有透明效果的API

一.背景 FlashGet的透明效果大家羡慕吧.传统的Windows应用程序想实现半透明效果,一般来说需要处理自己的窗口的WM_Paint消息窗口,很麻烦.现在好了,SetLayeredWindowAttributes是windows的新api,win2000以上才支持,它能使使窗体拥有透明效果.我在Google搜了下,介绍SetLayeredWindowAttributes的文章大多是delphi的和vb的.好不容易找到一篇vc的,依法炮制后,vc的IDE却说我SetLayeredWindow

CSS实例:老外收集的CSS3动画效果

文章简介:animate.css 一些常用的CSS3动画效果. 大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:http://daneden.me/animate/ 自定义下载样式:http://daneden.me/animate/build/ git地址:https://github.com/daneden/animate.css