使用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拼合图像

转载于:https://www.cnblogs.com/lal-fighting/p/5078772.html

使用css3进行增强相关推荐

《图解CSS3：核心技术与案例实战》——1.3节渐进增强
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第1章,第1.3节渐进增强,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 1.3 渐进 ...
浏览器兼容CSS渐进增强 VS 优雅降级如何选择
由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...
10 个实验性的 JS/CSS3 编程技术
本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在IE6上使用的旧的解决办法.需要注意的是,下面列出的大部分技术还在实验阶段,而且有些不是纯CSS技术(一些使用jQuery或其 ...
响应式Web设计：HTML5和CSS3实战读书笔记
响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao pandao####vip.qq.com ...
css标记_保持CSS3代码标记苗条
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. Web开发人员可以使用更复杂CSS3语 ...
杂谈：渐进增强与优雅降级
作为一名前端开发人员,最头疼的莫过于浏览器兼容.远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与浏览器兼容顽强斗争.而渐 ...
HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
HTML5手机重力与方向感应的应用——摇一摇效果
HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重 ...
html怎么给段落设置背景色,css的(文字、背景、段落)样式
文字样式属性: font-style:normal/ italic [设置文本为斜体] font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体] fo ...

使用css3进行增强

使用css3进行增强相关推荐

最新文章

热门文章