php 图片圆角透明,CSS_使用CSS3实现圆角,阴影,透明,CSS实现圆角,阴影,透明的方法 - phpStudy...
使用CSS3实现圆角,阴影,透明
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及.
1.圆角
CSS3实现圆角有两种方法.
第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了.
复制代码代码如下:
.box {
/* 首先定义要使用的4幅图像为背景图 */
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
/* 然后定义不重复显示 */
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
/* 最后定义4幅图分别显示在4个角上 */
background-position: top left,
top right,
bottom left,
bottom right;
}
第二种方法就简洁了,直接用CSS实现,不需要用图片.
复制代码代码如下:
.box {
/* 直接定义圆角的半径就可以了 */
border-radius: 1em;
}
但是第二种方法还没有得到很好的支持,当前Firefox和Safari(同一个核心的Chrome也可以),需要使用前缀
复制代码代码如下:
.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
2.阴影
CSS3的box-shadow属性可以直接实现阴影
复制代码代码如下:
img {
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}
这个属性的4个参数是:垂直偏移,水平偏移,投影的宽度(模糊程度),颜色
3.透明
CSS本来就是支持透明的,IE以外的浏览器是opacity属性,IE是filter:alpha.但是,这个透明度有个缺点,就是它会使应用元素的内容也会继承它,比如有一个DIV,
复制代码代码如下:
内容
如果像上面这样DIV的背景是透明了,但是内容两个字也透明了,这时可以用RGBa.
复制代码代码如下:
.alert {
rgba(0,0,0,0.8);
}
这个属性前3个属性表示颜色红,绿,蓝,第四个是透明度.红绿蓝都是0代表黑色,所以rgba(0,0,0,0.8)就是将黑色的透明度设置为0.8.
CSS3使得原来很难实现的效果变得很简单,希望各浏览器对CSS3尽快实现完美支持.相关阅读:
基于jQuery实现动态数字展示效果
JS设置下拉列表框当前所选值的方法
各种快递查询--Api接口
如何判断微信内置浏览器(通过User Agent实现)
php上传大文件设置方法
收罗CSS布局中有关水平和垂直居中的N种方法
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
JS实现图片高亮展示效果实例
深入php中var_dump方法的使用详解
php实现excel中rank函数功能的方法
win7系统安全模式怎样解除 win7系统安全模式解除图文教程
PHP简单获取视频预览图的方法
基于mouseout和mouseover等类似事件的冒泡问题解决方法
jQuery Ajax()方法使用指南
php 图片圆角透明,CSS_使用CSS3实现圆角,阴影,透明,CSS实现圆角,阴影,透明的方法 - phpStudy...相关推荐
- 长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案.CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了. css实现圆角矩形.半圆.圆形效果的优点: * 减少维护的工作量, ...
- css3动画图片旋转绕轴,css3图片旋转如何实现?css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
- 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器
B站视频:https://www.bilibili.com/video/BV1Kp4y167iX 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器 今天带大家实现了一个炫酷的 ...
- css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜 视差图片 展示特效.利用CSS3实现3D倾斜视差图片展示特效 代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
- dw整理css_使用CSS3整理表
dw整理css View demo 查看演示Download Source 下载源 Today I am going to show you how to use some neat CSS3 pro ...
- css3绘制环形_利用CSS简单地绘制一个操场
前言 伴随着 CSS3(CSS Module 3)的发布,我们设计网页时有了更多的选择.对于一些比较简单的小图标和图片,我们可以利用 CSS3 很方便的进行绘制,从而减少页面的图片数量和HTTP请求次 ...
- css如何实现背景透明,文字不透明
css如何实现背景透明,文字不透明? 之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景 ...
- html5 css透明效果,css中实现背景透明的三种方式
css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...
- html中正方形圆角框,CSS高级技巧:圆角矩形
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明 ...
最新文章
- 20个精美图表,教你玩转 Pyecharts 可视化
- c++ 对‘cv::waitKey(int)’未定义的引用
- Unknown property 'mybatis-plus' yml文件报错
- SAP连接外部ORACLE数据库
- git 拉取gitlab代码
- shiro学习(17):easyui布局测试
- JPBC参数介绍Element,Field,Point等
- Bootstrap 标签页Tab插件使用方法
- python 教材为什么喜欢用spam举例_斯坦福大学教授列举出的python入门最容易犯的错误,你中招了吗?...
- 访问一下互联网中的IPV6主机
- greenplum 单表 数据扫描
- 高效能人士的7个习惯
- ES index not_analyzed
- 哪款 Linux 才是更好的 CentOS 替代品?
- putty登录树莓派4超时
- 浅析 Promise
- rpm包安装linux系统,包管理 ----- Linux操作系统rpm包安装方式步骤
- Note For Linux By Jes(2)-Linux文件与目录管理
- 关键字和关键字优化(转)
- 简单回顾下过去这一年的工作