CSS3下不一样的阴影、背景和圆角边框样式
来源:互联网 发布:mysql不等于查询 编辑:程序博客网 时间:2024/05/23 18:26
CSS3下不一样的阴影、背景和圆角边框样式
CSS2.1 发布至今已有7年的历史。CSS3的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果
当前,CSS3技术最适合在移动Web开发中使用的特性包括:
●增强的选择器
●阴影
●强大的背景设置
●圆角边框
阴影:
现在的CSS3样式已经支持阴影样式效果。目前可使用的阴影的效果分为两种:文本内容的阴影效果和元素的阴影效果。
box-shadow
CSS3的box-shadow属性是让元素具有阴影的效果,其语法如下:
box-shadow:<length> <length> <length> | color:
其中第一个 length 是阴影水平偏移值;第二个length值是阴影垂直偏移值;第三个值是阴影模糊值。水平和垂直偏移值可取正负值,如4px或-4px.
目前box-shadow已经得到大部分现代浏览器的支持。可是,当我们在基于Webkit的Chrome和Safari等浏览器上使用该属性时,需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则要写成-moz-box-shadow的形式。
下面代码为使用box-shadow的简单示例,该示例兼容Chrome、Safari及Firefox浏览器:
<style type="text/css"> div { /* 其他浏览器 */ box-shadow: 3px 4px 2px #000; /* webkit内核浏览器 */ -webkit-box-shadow: 3px 4px 2px #000; /* Firefox浏览器 */ -moz-box-shadow: 3px 4px 2px #000; padding:5px 4px; } </style>
text-shadow
text-shadow属性用于设置文本内容的阴影效果或模糊效果。
目前,text-shadow属性已得到Safari、Firefox、Chrome和Opera浏览器的支持。IE8以下的浏览器都不支持该特性。并且,大部分的移动web浏览器都得到了很好地支持。
text-shadow的语法和box-shadow语法基本上一致:
box-shadow:<length> <length> <length> | color:
如下代码为text-shadow的简单实用示例:
<style type="text/css"> div { text-shadow: 5px -10px 5px red; color:#666; font-size:16px; } </style>
背景
在CSS3规范中,CSS3对背景属性增加了很多新特性。它既能支持背景的显示范围,也能支持多图片背景。最重要的是它可以通过属性设置,为背景颜色设置渐变或任何颜色效果,功能非常丰富。
CSS3对于背景属性的增强,以往我们使用图片来代替各种页面修饰,逐渐可以通过该背景属性替换。这些功能对页面的加载速度,特别是在移动设备平台,是一个页面性能的提升。background-size
background-size属性用于设置背景图像的大小。
目前该属性已经得到了Chrome、Safair、Opera浏览器的支持,同时该属性也支持Android和IOS平台的Web浏览器。
background-size属性在不同的Web浏览器下语法方面有一定的差别。在基于Webkite内核的浏览器Chrome和Safari浏览器下,其写法为-webkit-background-size;
在移动开发项目中,建议采用兼容模式的写法,示例如下:
<style type="text/css"> div { background-size:10px 5px; -webkit-backgriud-size:10px 5px; } </style>
background
background属性在CSS3中被赋予的非常强大的功能。其中一个非常重要的功能就是多重背景。在过去,只能使用一张图片,而CSS3中可以设置多张背景图,语法如下:
background:url(bg.jpg) left top no-repeat,
url(bg2.jpg) left top no-repeat;
Chrome和Safari浏览器都支持background属性的多重背景图片。由于它们是基于Webkit的浏览器,因此该功能也被Android和IOS平台的移动浏览器支持。但鉴于采用图片的方式设置背景会严重过影响在移动Web端的整体体验和性能,因此可是使用Webkit中的一种特性对其背景采用颜色渐变,而非采用图片方式。语法如下:
-webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)
type类型是指采用渐变类型,如线性渐变 linear 或径向渐变 radiual。如下代码:
<style type="text/css"> div { background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000)); }</style>
圆角边框
在CSS3中已经能够轻松的实现圆角效果,代码中只要定义border-radius属性就可以随意实现圆角效果。
到目前为止,该属性已得到Chrome、Safari、Opera以及Firefox浏览器的支持。但是,各浏览器之间写法有些差别,例如:Chrome和Safari浏览器需要写成-webkit-border-radius;Firefox浏览器则要写成-moz-border-radius;兼容的示例代码如下:
<style type="text/css"> div { border-radius:10px 5px; /* Firefox浏览器 */ -moz-border-radius:10px 5px; /* webkit 内核浏览器 */ -webkit-border-radius:10px 5px; } </style>
需要注意的是,border-radius属性是不允许使用负值的,当其中一个为0时,则该值对应的角为矩形,否则为圆角。
备注:以上内容摘自《HTML5移动开发指南》一书,仅供学习参考!
- CSS3下不一样的阴影、背景和圆角边框样式
- CSS3 背景和边框
- CSS3-边框和背景
- css3-边框圆角阴影渐变
- CSS3——新增背景属性和边框样式
- css3基础样式 边框 阴影 字体
- CSS3:元素的边框、背景和大小
- css3文字渐变和阴影、图片边框和边框阴影
- CSS3背景与边框相关样式
- CSS3背景与边框相关样式
- CSS3使用边框和背景
- css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
- css3圆角和阴影
- css3 圆角和阴影
- CSS3 创建圆角边框及矩形添加阴影
- css3实现的图片边框阴影特效
- css3设置边框阴影的属性
- 设置View只显示透明下边框、透明背景框、阴影背景框的方法
- PS CS4 改变文字字体时弹出“ 无法完成请求 因为程序错误”信息的解决方法
- POJ 2486 Apple Tree(树形dp)
- Android Fragment完全解析,关于碎片你所需知道的一切
- Android学习之 监听网络连接状态的改变
- single num--唯一一个只出现一次 的数
- CSS3下不一样的阴影、背景和圆角边框样式
- 哈希表对字符串的高效处理2:在一个字符中删除第二个字符出现过的所有字符
- 一种使用QThread线程的新方法QObject::moveToThread
- 扩展GCD 中国剩余定理(CRT) 乘法逆元模版
- Install Lenovo E430c wireless driver in linux Mint
- Xcode 工程info.plist 文件
- eclipse安装EGit插件(一)
- 装window照片库
- ubuntu装好了,第一次用感觉是挺不错的。