使用css3进行增强

1,为元素创建圆角

border-radius:25px;

.about img{

    border: 5px solid #bebebe;
float: left;
margin-right: 5px;
border-radius: 10px;
}

border-radius的属性值也和margin,padding,border 一样可以有1

~4个,其代表的上下左右也是一样的。

border-top-left-radius:r;(左上,同理可以分别创建四个不同的圆角)

2,为文本添加阴影

 h1
{
text-shadow: 5px 5px 5px #FF0000;
}
5px 5px 5px #FF0000;  分别代表水平偏移量,垂直偏移量,模糊半径(必须是正整数),颜色

可对文本添加多重阴影:text-shadow: 5px 5px 5px #FF0000,2px 8px 56x #fff;

改回默认值:text-shadow: none;
text-shadow属性是继承的。

3,为元素添加阴影
box-shadow:inset;spread;(有两个属性可以选择)
box-shadow可以接受六个值:水平偏移量,垂直偏移量,模糊半径(必须是正整数)(可选),inset(可选,创建内阴影),spread(可选,创建外阴影),颜色
也可以多重阴影,和文本多重阴影类似。
改回默认值和文本阴影类似。 box-shadow属性是不继承的。 4,应用多重背景
为单个元素应用多重背景:
background-color:b,
background-imge:u, (u为图形引用的相对或据对URL)
background-position:p,(p是成对的x-offset和y-offset 可正可负)
background-repeat:r;(repeat-x,repeat-y,no-repeat,用逗号隔开,分别对应imge中的u的每个url) 5,使用渐变背景
background:silcer;
background:linear-gradient(to right,silver,black);(从左往右,从银色到黑色。top right,bottom right。可以从四面八方变过来)
a、创建备用背景色:background:color;
b、定义线性渐变:background:linear-gradient(to top.....(等多方位都可以变化),角度值,颜色);
c、定义径向变化:background:radial-gradient(变换形状,渐变尺寸,size(如果只有一个值,不能用分数),变换位置,指定颜色);
6,为元素设置不透明度
oparity:0;(0表示元素的不透明度,一般为两位小数,不带单位) 使用sprite拼合图像
 
 

使用css3进行增强的更多相关文章

  1. css3渐进增强 VS 优雅降级

    印象中,渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功 ...

  2. 【新特性速递】CSS3动画增强

    FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对多个地方的CSS3动画进行了增强,使得用户体验更好. 1. 树控件启用EnableSingleExpand时,使得展开动画和折叠其 ...

  3. 第十四章:使用CSS3进行增强

    1.为不支持某些属性的浏览器使用polyfill:如果想弥合较弱的浏览器和较强的浏览器之间的功能差异,可以使用polyfill(通常又称作垫片),通常用js实现.但是有些较弱的浏览器运行JS的速度要慢 ...

  4. 5个CSS3技术实现设计增强

    层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发.你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新属性没有得到官方的确认,但是一些浏览器已经开始支持来自CSS ...

  5. HTML5和CSS3基础教程(第8版)-读书笔记(3)

    第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...

  6. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  7. 浏览器兼容CSS渐进增强 VS 优雅降级如何选择

    由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...

  8. HTML5和CSS3的一些学习记录

    1.引述块级文本的标签(blockquote): <blockquote cite="http://www.marktwainbooks.edu/"> <p> ...

  9. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

随机推荐

  1. SQL复杂查询和视图(2)

    分组查询 SQL可以将检索到的元组按某一条件进行分组,分组是属性值相同的为一组 求每个学生的平均成绩 SELECT sn,AVG(score)FROM scGROUP BY sn 先按sn进行分组,即 ...

  2. java保留两位小数

    java保留两位小数问题: 方式一: 四舍五入  double   f   =   111231.5585;  BigDecimal   b   =   new   BigDecimal(f);  d ...

  3. redis在window环境下的安装

    1.下载客户端文件 地址:https://github.com/dmajkic/redis/downloads 客户端文件目录说明: 2.启动redis服务端 1.在客户端文件目录下新建一个bat文件 ...

  4. oracle数据匹配merge into

    来源于:http://blog.csdn.net/vtopqx/article/details/50633865 前言: 很久之前,估计在2010年左右在使用Oralce,当时有个需求就是需要对两个表 ...

  5. java-byte[]图片在页面展示

    public void img(HttpServletRequest req, HttpServletResponse res) { //res.setHeader("Content-Typ ...

  6. Bean 的作用域

    •在 Spring 中, 可以在 <bean> 元素的 scope 属性里设置 Bean 的作用域. 默认情况下, Spring 只为每个在 IOC 容器里声明的 Bean 创建唯一一个实 ...

  7. 成为JavaGC专家(1)—深入浅出Java垃圾回收机制

    转载自:http://www.importnew.com/1993.html 对于Java开发人员来说,了解垃圾回收机制(GC)有哪些好处呢?首先可以满足作为一名软件工程师的求知欲,其次,深入了解GC ...

  8. 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...

  9. Event&Condition pyton

    Event 一个线程需要根据另外一个线程的状态来确定自己的下一步操作,需要调用threading库中Event对象:Event包含一个可由线程设置的信号标志,在初始情况下,event对象的标志位为假( ...

  10. 【BZOJ-1923】外星千足虫 高斯消元 + xor方程组

    1923: [Sdoi2010]外星千足虫 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 766  Solved: 485[Submit][Status ...