使用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. 【摘抄】将xml注释文档生成网页

    config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath(&quo ...

  2. android中通话录音

    file = new File(Environment.getExternalStorageDirectory(), this.incomeNumber + System.currentTimeMil ...

  3. Android studio 提高导入项目的速度

    最近在下载了一些开源的项目在学习,在导入as时,速度要好慢,如项目大点,就更慢了,实在是坑啊! 那有没有方法能导入时间快点呀! 分析发现,as在导入项目是首先是读 来自为知笔记(Wiz)

  4. Question2Answer安装

    Question2Answer安装 Question2Answer的安装过程很简单,只需要几分钟的时间你就可以有一个强大的问答系统. 安装要求 Web服务器(比如Apache) PHP 4.3 或更高 ...

  5. Chrome DevTools good good study day day up

    Chrome DevTools 官方页面 https://developer.chrome.com/devtools

  6. jsrender for object

    <div id="result"></div> <script id="theTmpl" type="text/x-js ...

  7. DOS命令行下mysql 基本命令

    第一招.mysql服务的启动和停止 net stop mysql net start mysql 第二招.登陆mysql 语法如下: mysql -u用户名 -p用户密码 键入命令mysql -uro ...

  8. JAVA实现打印机

    我这里有以前收藏的代码,两个类实现了简易的文本打印机的功能,包括预览.简单跟你说一下. 1.PrinterDemo.java主体类,也是入口类,里面有main方法可以直接在Eclipse中调试运行,他 ...

  9. js-自制轮播插件!

    刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已. ...

  10. 【BZOJ-1391】order 最小割 + 最大全闭合图

    1391: [Ceoi2008]order Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1334  Solved: 405[Submit][Statu ...