按照常规的理解，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着css技术的发展以及css3的出现，各大厂商的浏览器的兼容性越来越好，利用css技术来处理和实现图片的各种效果变得越来越便捷。css及css3中的各种属性将很容易的帮助我们实现各种想要的图片效果。这里我们就来谈一谈使用css和css3来实现各种图片效果。首先可以学习Gxl网相关的免费课程1. 学习《CSS3 入门教程》中...
在CSS3出现之前，想要实现圆角的效果可以通过图片或者用margin属性实现，传统的圆角生成方案，需要多张图片作为背景图案。CSS3出现以后，就不需要浪费时间去制作多张图片了，大大的减少了工作量，提高了网页的性能，提升页面加载速度，并且增加了视觉的可靠性。既然说了CSS3中的圆角有这么多的优势，那么我们就来总结下css3圆角和圆角边框使用方法。可以先学习《快速玩转CSS3教程》中的 CSS3圆角介绍 章节课程CSS3圆角及圆角边框使...
关于onclick的行为与内容分离 1.通过链接触发弹出窗口方式 （不推荐使用此方法！！！）<a href=# onclcik = "window.open(holiday_pay.html,WinName,width=300, height = 300);"> Holiday Pay </a>如果JS被禁用链接无法引导用户进入对应页面,不要为href属性赋"#"及类似的值2.普通情况<a href=holiday_pay.html onclcik = "window.open(this.href,WinName,width=300, height = 300);"> Holiday Pay </a>3.0 大量重复...
说到H5+C3会不会觉得东西好多啊，今天就整理了一份总结性的内容。CSS3选择器有哪些？ 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 1.颜色：新增RGBA，HSLA模式 2. 文字阴影（text-shadow、） 3.边框： 圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5.背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分...
1、什么是媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 2、为什么响应式设计需要，媒体查询如果没有CSS3的媒体查询模块，就不能针对设备特...
因为期末考试、调整心态等等的种种原因，距离上一次的项目练习已经过了很久了，今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原。设计图很长，整个页面分为了好几个区域，所以就不放完整的设计图了，具体的设计文件可以在文末的Github地址中下载。第一次的总结是以我对页面架构的理解，按照代码实现顺序讲解的，那这一次就按照遇到的问题总结性地记录吧。欢迎大家看完我的作品和总结以后，提出宝贵的建议！谢谢大家！ ...
学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等...
CSS3的三个与变形和http://www.gxlcms.com/code/9595.html" target="_blank">动画啊相关的属性：Transform浏览器支持情况：Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。2D transform变换方法函数描述translate(x,y)定义 2D 转换，沿着 X 和...
一、web font web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体： a）、安装好操作系统后，会默认安装一些字体，这些字体文件描述了每一个文字的形态，一般中文文件大，英文文件小，因为中文字符数多；在控制面板中可以找到文字文件夹，在C:\Windows\Fonts下也可以直接找到。另外如果想让自己的电脑上有更加丰富的字体，可以下载新的字体文件后复制到改位置。b)、我们在文档中显示...
一、盒子模型（Box Model） 盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：DOCTYPE html> <html><head><me...
Atitti css3 新特性attilax总结图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2CSS3 选择器（Selector）4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染（Text-decoration） 描边12 CSS3 的多列布局（multi-column layout）13 边框和颜色（color, border）14 CSS3 的渐变效果（Gradient）15 线性渐变15 径向渐变16 CSS3 的阴影（Shadow）和反射（Reflect）效果19 CSS3 的背景效果21 CS...
一. 不动,区域内的变化(本质生产一张图片)/*渐变1 长方形之渐变先定义长方形的宽高大小(好观察最好加边框)/*方向 颜色 位置*/利用 background-image: -webkit-linear-gradient(right top,red 50% ,blue 50%);2 大圆中小圆变色 先做一个大圆/*变化圆心 从内到外依次填充颜色*/background-image: -webkit-radial-gradient(50% 50%,yellow 20% ,red 50%, pink 55%, blue 100%);/*也可以在矩形中以圆渐变*/3 倒影.testb{bac...
1、*：通用元素选择器* { margin: 0; padding: 0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法*选择器也可以应用到子选择器中，例如下面的代码：#container * { border: 1px solid black; } 这样ID为container 的所有子标签元素都被选中了，并且设置了border。2#ID：ID选择器#container { width: 960px; margin: auto; } ID选择器是CSS中效率最高的选择器，...
颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(red),g(green),b(blue)[计算机三原色]; 值...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/} [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如 ↓...