使用css3进行增强

  使用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,为文本添加阴影

1 h1
2 {
3 text-shadow: 5px 5px 5px #FF0000;
4 }
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拼合图像
 
 
				
时间: 2024-12-19 18:21:40

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

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

FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对多个地方的CSS3动画进行了增强,使得用户体验更好. 1. 树控件启用EnableSingleExpand时,使得展开动画和折叠其他节点动画同步进行 FineUIPro/Mvc/Core v6.0.0: FineUIPro/Mvc/Core v6.1.0: 2. 为树表格的节点展开折叠增加动画效果 FineUIPro/Mvc/Core v6.0.0: FineUIPro/Mvc/Core v6.1.0: 3. 为表格的行扩展列

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

1.为不支持某些属性的浏览器使用polyfill:如果想弥合较弱的浏览器和较强的浏览器之间的功能差异,可以使用polyfill(通常又称作垫片),通常用js实现.但是有些较弱的浏览器运行JS的速度要慢得多. 2.为元素创建圆角: (1)为元素创建四个相同的圆角: .all-corners{ -webkit-border-radius:r border-radius:r }   这里的r是圆角半径的值 (2)为元素创建一个圆角: .one-corner{ -webkit-border-top-le

5个CSS3技术实现设计增强

层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发.你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新属性没有得到官方的确认,但是一些浏览器已经开始支持来自CSS3得新特性了.  但问题是——许多浏览器支持了,唯独最主要的Internet Explorer浏览器仍不支持!  很多人尤其是中国的前端er们会觉得既然IE不支持,那就先不关心CSS3.其实不应这样的,CSS3现在能为我们带来什么好处呢?至少现在我们就能使用那些CSS3的新特性来进行设计增强.设计增

HTML5与CSS3基础(三)

11 用CSS进行布局 11.1 开始布局的注意事项 1 还是要强调的是内容与显示分离 2布局方法: 固定布局:整个页面和每一栏的内容都有基于像素的宽度. 就是说宽度都是固定好了的,不会因为你改变设备就随着你的设备的宽去进行改变. 响应式布局(流式页面):它使用的是百分数定义宽度,允许页面随着环境的改变来发生相应的改变. 就是现在最流行的响应式布局:bootstrap框架 3浏览器的注意事项: 浏览器之间存在在一些差异性,所以在网站建立好之后需要在不同的网站上进行测试 11.2构建页面 构造页面

杂谈:渐进增强与优雅降级

作为一名前端开发人员,最头疼的莫过于浏览器兼容.远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与浏览器兼容顽强斗争.而渐进增强和优雅降级两种不同的开发流程,也是在我们项目初期做调研选型时会考虑的一个点. 渐进增强(Progressive Enhancement) 一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果.交互.追加功能达到更好的体验. 优雅降级(graceful degrad

HTML5手机重力与方向感应的应用——摇一摇效果

http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方

前端知识点总结(HTML篇2)

html概念.全称.含义 web标准构成----结构.表现.行为 html基本结构 doctype ---- 声明文档类型 常用标签 img的属性 src alt title 含义 a的属性 href target含义 表格属性 border-collapse table-layout:fixed 表单 button和submit区别 2.css基础 css全称 含义 css语法 样式表创建的三种方式 两种外部样式引入的区别 样式表的优先级 选择器 权重 浮动属性的取值及清除浮动的方式及各自的优

[Intern][2019.03.16]针对已有的HTML如何只凭JS改动?

刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不知道,只有通过改动JavaScript才能实现对页面的修改. 固然,操作DOM有原版的 document.getElementsBy 一族,可是它们get的时候不能通过 class 和 标签 来区分,比如: <div class="FAIL"> <tr class=&qu

使用HTML5、CSS3和jQuery增强网站用户体验[留存]

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验.而且使用这些特性将会比使用flash更加有效.也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了.在今天这篇文章中,我们将介绍一些非常实用的教程,技巧和资源来帮助大家构建一