使用css3进行增强

1,为元素创建圆角

border-radius:25px;

  1. .about img{
  2.  
  3. border: 5px solid #bebebe;
  4. float: left;
  5. margin-right: 5px;
  6. border-radius: 10px;
  7. }

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

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

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

2,为文本添加阴影

  1. h1
  2. {
  3. text-shadow: 5px 5px 5px #FF0000;
  4. }
  1. 5px 5px 5px #FF0000; 分别代表水平偏移量,垂直偏移量,模糊半径(必须是正整数),颜色
  2.  
  3. 可对文本添加多重阴影:text-shadow: 5px 5px 5px #FF0000,2px 8px 56x #fff;
  4.  
  5. 改回默认值:text-shadow: none;
  1. text-shadow属性是继承的。
  2. 3,为元素添加阴影
    box-shadowinsetspread;(有两个属性可以选择)
  1. box-shadow可以接受六个值:水平偏移量,垂直偏移量,模糊半径(必须是正整数)(可选)inset(可选,创建内阴影),spread(可选,创建外阴影),颜色
    也可以多重阴影,和文本多重阴影类似。
    改回默认值和文本阴影类似。
  2.  
  3. box-shadow属性是不继承的。
  4. 4,应用多重背景
    为单个元素应用多重背景:
    background-colorb,
    background-imge:u, (u为图形引用的相对或据对URL)
    background-positionp,(p是成对的x-offsety-offset 可正可负)
    background-repeatr;(repeat-xrepeat-yno-repeat,用逗号隔开,分别对应imge中的u的每个url
  5.  
  6. 5,使用渐变背景
    backgroundsilcer
    backgroundlinear-gradientto rightsilverblack);(从左往右,从银色到黑色。top rightbottom right。可以从四面八方变过来)
    a、创建备用背景色:backgroundcolor
    b、定义线性渐变:backgroundlinear-gradientto top.....(等多方位都可以变化),角度值,颜色);
    c、定义径向变化:backgroundradial-gradient(变换形状,渐变尺寸,size(如果只有一个值,不能用分数),变换位置,指定颜色);
  1. 6,为元素设置不透明度
    oparity0;(0表示元素的不透明度,一般为两位小数,不带单位)
  2.  
  3. 使用sprite拼合图像
  1.  
  1.  
  1.  

使用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. 用户 'IIS APPPOOL\***' 登录失败

    用户 'IIS APPPOOL\DefaultAppPool' 登录失败. 我在windows8中安装了iis之后添加了我做的网站打开之后提示用户 'IIS APPPOOL\DefaultAppPoo ...

  2. MVC———用自定义扩展类实现验证

    废话少说,直接上图 →_→ NO.1 NO.2 NO.3 NO.4 NO.5 NO.6 NO.7 NO.8 NO.9 NO.10 NO.11 NO.12 NO.13 NO.14 NO.15 NO.16 ...

  3. CSS Bug

    父子标签间用margin的问题,表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上,IE6&7下没有转移.测试代码: <body> <style type ...

  4. Spring学习进阶(二)Spring IoC

    在使用Spring所提供的各种丰富而神奇的功能之前,必须在Spring IoC容器中装配好Bean,并建立Bean与Bean之间的关联关系.控制反转(Inverser of Control ioc)是 ...

  5. clean之后R文件消失

    首先确定你的SDK是新的. 其次接下来检查你的.xml文件,文件名不能大写. 如果xml文件太多 ,那么clean一下你的项目,这时候注意看Console的提示. Console会提示你xml文件错误 ...

  6. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

  7. oracle从游标批量提取数据

    来源于:http://blog.csdn.net/ceclar123/article/details/7974973 传统的fetch into一次只能取得一条数据,使用fetch bulk coll ...

  8. 开发错误记录5:Failed to resolve: com

    今在导入项目时报:Failed to resolve: com.android.support:appcompat-v7:23.1.1包! 一.按F12查看包引用情况 v7包版本不一样,环境中只有co ...

  9. VMWare虚拟机提供的桥接、nat和主机模式的区别

    虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host-Only 哪一种网络是适合自己的虚拟 ...

  10. SVM与LR的区别以及SVM的优缺点

    对于异常数据,SVM比LR更好 SVM的优缺点: 优点:1.提供非常精确的分类器 2.更少的过拟合(因为有L2正则化项0.5||w||2),对噪声数据更加鲁棒(因为损失函数的原因) 缺点:1.SVM是 ...