陶小凡 -
上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。
实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景
直角切角
先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。
注：background: #58a不是必须的，加上它是为了将其作为回退机制。
实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。
依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。
好了，现在实现了。如果要四个角的话，就要四层渐变了。
就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！
相关推荐
CSS3怎么做出过渡渐变效果
transition的语法：transition： transition-property || transition-duration ||transition-timing-funciton || transition-delay ；其参数的取值说明如下：<transition-property>:定义用于过渡的属性；<transition-duration>:定义过渡过程需要的时间（必选，否则不会产生过渡效果）<transition-timing-function>:定义过渡的方式；<transition-delay>:定义开始过渡的延迟时间；使用transition属性定义一组过渡效果，需要以上四个参数。transition属性可以同时定义两组或两组以上的过渡效果，组与组之间用逗号分隔。基于webkit内核的私有属性是：-webkit-transition;基于gecko内核的私有属性是：-moz-transition;基于prestot内核的私有属性是：-o-transition;2023-07-05 17:30:362
css3中渐变有几种
两种：2023-07-05 17:30:451
CSS3中关于渐变的说法错误的是（）
CSS3中关于渐变的说法错误的是（） A.CSS3径向渐变是圆形或椭圆形渐变 B.径向渐变颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合 C.渐变中angle角度是指水平线和渐变线之间的角度，按顺时针方向计算(正确答案) D.CSS3定义了两种类型的渐变:线性渐变和径向渐变2023-07-05 17:30:571
如何CSS实现网页背景三种颜色渐变效果？
这是区块背景，不是页面的背景，而且中间那个渐变应该是一张图片，而其他的颜色就应该是背景色填充，现虽然css3可以支持多个背景，和很强大的滤镜功能，但目前很多主流浏览器不支持css3所以不可能是单纯的css生存的。 补充： 你不信的话，可以点击查看背景图片。 追问： 图片当然可以轻易实现，可我想知道如何用CSS实现简单的渐变，两种颜色就好，让我知道它的原理和方法。 回答： css实现渐变？只在safari浏览器上有效，别的基本都不支持。 我想你应该是想这样子吧，用ps之类的软件做好一个渐变取1-2个像素的宽度保存为一张图片，然后用css写如下的规则。2023-07-05 17:31:065
CSS3中线性渐变，怎么让它在div中，往两边渐变
<div style="height:50px; background-image:linear-gradient(to right,red,yellow,red)"></div>2023-07-05 17:31:371
如何用css使边框颜色渐变
一、CSS3 中的边框颜色 这里是一个10px宽的标准边框和边框颜色： #borderColor { border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; } 二、有圆角的边框颜色 #borderColorCorner { border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; }2023-07-05 17:31:453
这个绿色过渡渐变的css3样式，该怎么写？
background-coloruff1alinear-gradient2023-07-05 17:32:181
HTML5CSS3的图片渐变。只能渐变第一张。第二张图片直接变没了。求大神告诉！
.ul li img{width:100%;height:100%;} .ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;} .ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}改成ul li img{width:100%;height:100%;}ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}2023-07-05 17:33:411
为什么w3school里没有css3渐变属性
这个是背景颜色渐变，希望对你有帮助：background:-webkit-gradient(linear, left top, left bottom, form(#ccc), to(#999));-webkit-gradient从左到右的参数分别为：渐变类型，渐变起点，渐变终点，起点颜色，终点颜色。2023-07-05 17:33:573
css如何实现颜色的过渡效果
需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的<style>标签中，输入css代码：button {width: 100px; height: 50px;border: 0;color: white;background: -webkit-radial-gradient(#72787f, #545c64);}3、浏览器运行index.html页面，此时用CSS实现了按钮中间白、四周黑，上方白、下方灰的效果。2023-07-05 17:34:053
为什么渐变出不来，css3
也许是浏览器不兼容问题，一般做渐变色，我们都是用PS2017版本的翻译成代码，然后把颜色background-color里的所有代码复制到HTML里面使用。一般有3种，都要保留下来。不同的浏览器，可能不支持。2023-07-05 17:35:072
css使用线性渐变属性没有用是怎么回事
首先，blue和red之间要加个逗号，即background:-moz-linear-gradient(top,blue,red);其次，由于用了moz前缀，所以只有运行于火狐浏览器才有效。如果想运行于webkit内核的浏览器（比如Chrome、Safari），则改为background:-webkit-linear-gradient(top,blue,red);至于IE（指低版本的），由于不支持css3，就只能用它本身的滤镜了。2023-07-05 17:35:152
如何在HTML做出渐变？
1、HTML实现渐变<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #week{ width: 600px; height: 600px; background: linear-gradient(red, yellow, blue); border-radius: 300px; } </style> </head> <body> <div id="week"> </div> </body></html>2、实现效果2023-07-05 17:35:254
怎么设计css网页背景颜色过渡?
如果想做的真正的颜色过渡兼容性比较好，还是切一个宽1像素的图片，做背景，然后平铺效果最好。纯代码实现复杂而且兼容性不是很好。2023-07-05 17:35:416
如何用css3制作相册翻页效果
用css3制作纸张效果 一、中规中矩的效果 所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下： CSS3的box-shadow投影效果，相关代码如下： 代码如下: -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的胶带纸效果有点说头，这些微微倾斜的胶带是CSS写出来的，大部分效果源自CSS3，主要有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform做旋转效果；元素使用after伪类生成，完整代码如下： 代码如下: .page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; } 老外似乎很喜欢使用before和after伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需 要太久，大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪 类的使用少了些兼顾IE下显示的烦恼。 二、外翻卷角纸张效果 纸张一般都是有卷角的，所以，我们可以更近一步，模拟卷角效果来使得纸张的感觉更逼真，这里就要借助于投影了，且是曲线投影。 我们还可以给纸张增加渐变(gradient)效果，以模拟纸张的曲度。 同时，可以给文字增加投影，可以让文字有书写的凹陷感，可以进一步让纸张效果更逼真。 于是，在“中规中矩”纸张基础上，我们做点小手术，结果得到下面的效果： 您可以狠狠地点击这里：渐变卷边纸张效果demo 目前貌似opera浏览器还不支持CSS3渐变，同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实，都是CSS3，有必要搞得五花八门吗？ 相关渐变CSS代码如下： 代码如下: background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41)); 在60%的位置有个颜色拐点。 关于弧形的投影，也是使用:before/:after伪类实现的，相关代码如下： 代码如下: .page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15px; } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15px; } .page:before, .page:after { width: 90%; height: 20%; content: " "; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 22px; z-index: -1; } 要想查看效果的完整代码，demo页面查看源文件即可，脱光光，一览无遗。 这里的曲线投影卷角效果支持Opera浏览器，如下截图： 三、带分隔线的卷纸纸张效果 上面的纸张卷角效果是通过曲线投影效果来模拟的，而这里，纸张的卷边效果是纸张真的“曲线化”了，而且，还是带隔线的纸张效果哦，您可以参见下面的效果截图(Chrome 9)： 这里，Firefox浏览器下的纸张隔线使用的是重复渐变(Repeating Gradients)实现的，对于webkit浏览器，使用的是background-size实现的。实际上，Firefox3.6+已经支持background-size属性了(-moz-background-size)， 所以，对于Firefox浏览器，这里使用重复渐变与渐变+background-size是等效的。在FireFox4以及IE9浏览器中 background-size属性已经没有私有属性了，Opera浏览器在9.5版本时候就已经支持background-size属性了，但是存在一 些bug。 这里分隔线实现的相关CSS如下： 代码如下: background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30px; 而对于曲边的实现，使用的是border-radius圆角，这里展示下示意的代码： 代码如下: border-bottom-left-radius: 20px 500px; border-bottom-right-radius: 500px 30px; border-top-right-radius: 5px 100px; 当然，FireFox浏览器下的写法不是如此，其bottom, left是连起来的，而不是”-”分隔，这里仅仅是示意，这里的微曲线是如何实现的。相信看到上面的代码就知道意思了，这里就不啰嗦了。 还有其他些细节，如如何控制行高让文字与隔线一一对应，这些您要是有兴趣可以去demo页面，通过查看元素等方法一看究竟。 四、最后点老生常谈 难免的，本文的重点在于CSS3，所以就本文而言，IE6/IE7/IE8浏览器就是过来打酱油的，且三个纸张效果从一而终，都是下面这副模样： 虽然没有透明胶效果，没有投影，没有卷边，更没有分隔线，但是，就功能上来讲，一点都不影响使用。所以，无论你是渐进增强还是退求其次，纸张投影效果在实际项目中的应该也不是不可以的，这就要看个人和团队的抉择了2023-07-05 17:35:562
html中想要将背景颜色渐变怎么弄？
html中将背景颜色渐变步骤如下：1、先使用一个div标签。2、然后在header标签里面设置<div>标签的css样式。3、颜色渐变要有一个范围，需要给div设定width和height，也就是宽度和高度。4、然后设定div的background背景属性，如图所示，背景颜色渐变就用到-webkit-linear-gradient。5、接着，在-webkit-linear-gradient里面写top，设定渐变从顶部开始，到底部结束。6、再设定颜色的渐变顺序，比如我设置了从白色渐变到蓝色。7、做完这些之后，div背景渐变就成功了。2023-07-05 17:36:166
html、css新手求助！如何做向内凹的圆角？还有这个渐变效果？如下图
看图，多个div叠在一起，可以达到你这个效果2023-07-05 17:38:174
html怎么实现网页背景色渐变动态选择？
可以用两个取色器去分部选择两个颜色，然后使用css3渐变背景色去设置网页背景。渐变背景色可以设置线性、径向和起止颜色、方向等。2023-07-05 17:38:381
html中如何让背景颜色渐变？？？
1、打开html开发工具，新建一个html文件在html代码页面创建一个<div>并给这个标签添加一个类名linear：2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数是设置渐变的方向，后面两个参数是起始颜色和终止颜色。设置好后去浏览器查看效果：3、保存好html文件后使用浏览器查看效果。就会看到一个绿色到红色的渐变了。以上就是html中让背景颜色渐变的设置方法介绍：2023-07-05 17:38:486
css3.0的用途,优点,缺点
一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。编辑本段存在问题尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在： 第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。 第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。 第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。2023-07-05 17:40:292
径向渐变个性色是什么颜色
黄色，径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变，就像从中间点向四周方向拉伸一样。CSS3径向渐变不再像线性渐变那样沿着一条直线进行过度，而是以圆形或椭圆形进行渐变是圆形或椭圆形渐变，是从一个起点向所有方向渐变2023-07-05 17:40:363
简述CSS3和CSS2有什么不同
1 CSS3能代码更简洁、页面结构更合理，性能和效果得到兼顾；2 CSS3.0的一个动态流概念很好，类似FLASH味道，这个CSS2.0无法比拟；；3 CSS3数据更精简实用，许多CSS2.0要用图片做效果，它不需要，直接代码；； CSS2.0要请求服务器次数就要明显高于CSS3.0，所以性能和访问就要明显差点；4 但是就目前来讲，必须提到一点是兼容性问题，CSS3.0是新事物，所以目前来讲，国内浏览器大多还是IE8左右级别，大部分是不支持CSS3.0所以目前只有加强下CSS2.0功效果；但是用DW CS6.0,IE9、FF4+、chrome11+来进行调试，它们是支持CSS3.0的；2023-07-05 17:40:534
pie.htc可以使ie支持哪些css3属性
IE 6,7,8支持CSS3的部分属性。介绍htc，它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。。提示：PIE.htc URL路径是相对于当前HTML文件，不是CSS文件.比如 当前文件在“/”下 ，CSS文件在“/CSS”下，PIE.htc在“/CSS”下，behavior: url(/css/PIE.htc) 而不是behavior: url(PIE.htc)；一、border-radius 圆角 代码如下:.radius{border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;background: #EEFF99;behavior: url(/PIE.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */}说明：不支持单边的圆角属性，比如： border-top-left-radius，但是你可以这样来写：border-radius 圆角代码如下:border-radius: 5px 10px 15px 20px; /*top-left, top-right, bottom-right, bottom-left*/二、box-shadow 盒子阴影 代码如下:border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-box-shadow: #666 0px 2px 3px;-moz-box-shadow: #666 0px 2px 3px;box-shadow: #666 0px 2px 3px;background: #EEFF99;behavior: url(/PIE.htc);/* 可以让IE 6,7,8模拟部分的CSS3属性 */说明：不支持text-shadow(文本阴影)box-shadow 盒子阴影三、border-image 图片边框 代码如下:color: white;border: 8px solid #013D7A;-webkit-border-radius: 8px;-moz-border-radius: 8px;-webkit-border-image: url(img/border.png) 8 8 8 8 stretch;-moz-border-image: url(img/border.png) 8 8 8 8 stretch;border-image: url(img/border.png) 8 8 8 8 fill stretch;behavior: url(PIE.htc);用到的图片：border-image 图片边框四、CSS3 Backgrounds 背景渐变 代码如下:.gradient{ background: #CCC; /*fallback for non-CSS3 browsers*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/ background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/ background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/ background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/ background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/ background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/ behavior: url(PIE.htc);}说明：只支持linear-gradient（线性渐变）linear-gradient 线性渐变高级运用： 代码如下:background-size: 50px;background-color: #0ae;background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);-pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;behavior: url(/PIE.htc);更多demo：五、RGBA 颜色值 代码如下:.rgba{padding: 60px 0;background: #000;background: rgba(0,0,0,.2);-pie-background: rgba(0,0,0,.2);}说明：不支持box-shadowRGBA 颜色值六、IE6 png 透明 代码如下:.png img{-pie-png-fix: true;behavior: url(/PIE.htc);}.png{background-image:url(img.png);-pie-background:url(img.png);behavior: url(/PIE.htc);}说明：图片直接用-pie-png-fix: true，背景图片使用-pie-background来修复IE6下png透明的问题2023-07-05 17:41:071
用CSS3如何做线性渐变效果
<div style="border-top: 8px solid #000;-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;padding: 5px 5px 5px 15px;">在Firefox浏览器里能看到边框颜色渐变效果</div>这个只能在ff下看到渐变2023-07-05 17:41:271
CSS3里面的线性渐变：linear-gradient参数是什么样子的？
有3个参数：1. 参数是表示渐变的方向a) to+方向关键字，比如：to right，从左向右渐变；to left bottom 从右上角往左下角渐变。b) 具体的角度值，比如设置为90deg，就相当于to right，方向向右2. 起点颜色3. 终点颜色可以多看看这类的视频，比如说http://video.sina.com.cn/playlist/5772542-1866650682-1.html#1017763322023-07-05 17:41:451
请问一下CSS3样式中如何让背景渐变与背景图片共存啊！
目前，对CSS3支持日趋完善，实现兼容性的渐变背景效果是完全可以的，让背景渐变与背景图片共存的方法很简单，主要要注意的是图片要 保持“最小单元”的准则，选择正确的浏览器，该问题就能得到解决，下面介绍一下具体的解决方法。1、图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”。另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器。2、如果兼容程度允许的话，纯色渐变背景可以使用css3的渐变样式，如{background: linear-gradient(left top, red , blue);}，如此一来能够减少切图量，还可以加快网页加载速度，缺点是使用主流浏览器的话，就必须要添加前缀。3、注意对于webkit核心的浏览器，如Chrome/Safari浏览器，在这些浏览器下要做到渐变背景，也需要使用CSS3 渐变方法，css-gradient，具体就是-webkit-gradient，使用语Firefox浏览器业是有一点差异的。2023-07-05 17:42:064
CSS3中如何实现渐变效果
要得上面的线性渐变效果，我们这样去定义CSS3样式： background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c6ff00", endColorstr="#538300", GradientType="0"); /* IE*/ -moz-linear-gradient 有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。 -webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。 第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。 第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。 第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。 IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。 线性渐变使用from()以及to()方法指定过渡颜色点: background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0))); 线性渐变多个过渡点在同一位置： background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)); 径向渐变综合效果演示：2023-07-05 17:42:181
img标签使用css中的渐变是否支持
是。渐变属于CSS3，当前主流浏览器都支持，img标签支持使用CSS中的渐变。2023-07-05 17:42:251
css3 怎么做出像纸张翻页的效果
用css3制作纸张效果一、中规中矩的效果所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：CSS3的box-shadow投影效果，相关代码如下：代码如下:-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的胶带纸效果有点说头，这些微微倾斜的胶带是CSS写出来的，大部分效果源自CSS3，主要有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform做旋转效果；元素使用after伪类生成，完整代码如下：代码如下:.page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; } 老外似乎很喜欢使用before和after伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需 要太久，大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪 类的使用少了些兼顾IE下显示的烦恼。二、外翻卷角纸张效果纸张一般都是有卷角的，所以，我们可以更近一步，模拟卷角效果来使得纸张的感觉更逼真，这里就要借助于投影了，且是曲线投影。我们还可以给纸张增加渐变(gradient)效果，以模拟纸张的曲度。同时，可以给文字增加投影，可以让文字有书写的凹陷感，可以进一步让纸张效果更逼真。于是，在“中规中矩”纸张基础上，我们做点小手术，结果得到下面的效果：您可以狠狠地点击这里：渐变卷边纸张效果demo目前貌似opera浏览器还不支持CSS3渐变，同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实，都是CSS3，有必要搞得五花八门吗？相关渐变CSS代码如下：代码如下:background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41)); 在60%的位置有个颜色拐点。关于弧形的投影，也是使用:before/:after伪类实现的，相关代码如下：代码如下:.page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15px; } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15px; } .page:before, .page:after { width: 90%; height: 20%; content: " "; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 22px; z-index: -1; } 要想查看效果的完整代码，demo页面查看源文件即可，脱光光，一览无遗。这里的曲线投影卷角效果支持Opera浏览器，如下截图：三、带分隔线的卷纸纸张效果上面的纸张卷角效果是通过曲线投影效果来模拟的，而这里，纸张的卷边效果是纸张真的“曲线化”了，而且，还是带隔线的纸张效果哦，您可以参见下面的效果截图(Chrome 9)：这里，Firefox浏览器下的纸张隔线使用的是重复渐变(Repeating Gradients)实现的，对于webkit浏览器，使用的是background-size实现的。实际上，Firefox3.6+已经支持background-size属性了(-moz-background-size)， 所以，对于Firefox浏览器，这里使用重复渐变与渐变+background-size是等效的。在FireFox4以及IE9浏览器中 background-size属性已经没有私有属性了，Opera浏览器在9.5版本时候就已经支持background-size属性了，但是存在一 些bug。这里分隔线实现的相关CSS如下：代码如下:background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30px;而对于曲边的实现，使用的是border-radius圆角，这里展示下示意的代码：代码如下:border-bottom-left-radius: 20px 500px; border-bottom-right-radius: 500px 30px; border-top-right-radius: 5px 100px;当然，FireFox浏览器下的写法不是如此，其bottom, left是连起来的，而不是”-”分隔，这里仅仅是示意，这里的微曲线是如何实现的。相信看到上面的代码就知道意思了，这里就不啰嗦了。还有其他些细节，如如何控制行高让文字与隔线一一对应，这些您要是有兴趣可以去demo页面，通过查看元素等方法一看究竟。四、最后点老生常谈难免的，本文的重点在于CSS3，所以就本文而言，IE6/IE7/IE8浏览器就是过来打酱油的，且三个纸张效果从一而终，都是下面这副模样：虽然没有透明胶效果，没有投影，没有卷边，更没有分隔线，但是，就功能上来讲，一点都不影响使用。所以，无论你是渐进增强还是退求其次，纸张投影效果在实际项目中的应该也不是不可以的，这就要看个人和团队的抉择了。2023-07-05 17:42:322
JS 怎么动态设置CSS3动画的样式
把动画放到一个class里，然后用js控制DOM.className即可2023-07-05 17:42:391
css 能实现由两边向中间渐变的效果吗?
参考这个吧。colorzilla.com/gradient-editor/请用支持CSS3的browser查看。2023-07-05 17:42:451
css3 圆圈怎么加载数据从1%-100%
<style type="text/css">.content{ width:100px; height:100px; border-radius:100px; border:1px solid #f00; }</style><div class="content"></div></body>2023-07-05 17:42:521
css画长方形颜色各一半怎么画
缓过来了，开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释，我却在渐变上独喜欢flash的渐变变形工具。别人都说径向渐变，flash里面显示的是放射性渐变，我就沿用了放射性渐变的说法。你看出来啦，我曾经是flash的迷妹！e84d7f84b44ccb04a4feefd2a9667d64.gif放射性渐变的核心就是：从中心点出发，辐射到边界处。设置了四个色块，如图：429079e8282c5076af4170153c1af3d0.png用渐变变形工具可以查看cd5a69fb9311cda5db01c0338b24c840.png默认第一个色块从中心点出发，沿着半径分布色块，直到边界处。所以，我们可以理解这里的渐变线是半径。可以通过改变中心点的位置，边界的大小，半径的长短，三角形的移动实现非对称的渐变等效果。6522b7dc00c47d236409249b908e6d47.png原谅我没有来动画版本的，自己用flash试试呗！其实来个椭圆一样妥妥的。0ccef5ab67e2b3e35d7640cfab2ab533.png明白了这个基本的原理后，再看MDN上的这篇文章，是不是感觉很好懂了。至少这幅图好懂了↓aab88560ed7f1007df0e78972991fc2a.png半径就是虚拟渐变射线(virtual gradient ray)，中心点就是色块的起点(0%)，ending shape就是渐变的边界形状。ending shape只能是正圆(circle)或者椭圆(ellipse)。二、放射性渐变的语法结构// Definition of the ending shaperadial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, … ) */radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */radial-gradient( , … ) /* It draws a circle */radial-gradient( circle radius, … ) /* A centered circle of the given length. It can"t be a percentage */radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */// Definition of the position of the shaperadial-gradient ( … at , … )// Definition of the color stopsradial-gradient ( …, , … )radial-gradient ( …, , )官方的标准语法HTMD复杂呀。我们只能一点点攻克了。先了解几个基本概念：：指的是中心点的位置，这个定位和background-position的定位是一样的，比如“50px 40px”，“30% 44px”，“left center”等值，一个代表x坐标，一个代表y坐标。如果缺省，代表的是正中间(center)。它的取值也是这几种：：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。left：设置左边为径向渐变圆心的横坐标值。center：设置中间为径向渐变圆心的横坐标值或纵坐标。right：设置右边为径向渐变圆心的横坐标值。top：设置顶部为径向渐变圆心的纵标值。bottom：设置底部为径向渐变圆心的纵标值。：只能为正圆或者椭圆，正圆表示半径是一样的，椭圆则有x轴、y轴两个半径。默认的值是椭圆(ellipse)。：沿着渐变线的色彩的值和位置的值。位置的值可以是百分比或者具体的像素，和线性渐变的写法是一样的。比如“#f00 0%”，“red 25%”，“rgba(255,255,255,0.5) 200px”等。：表示ending shape放射性渐变结束的形状的大小。常用的有如下几个值：closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角，这个是默认值；2023-07-05 17:43:064
网页设计中怎样把链接点击后由红变蓝
如果未点击是默认黑色，那 a:link不用设置，如果是点击这链接，未松开，颜色是红色的话，a:active{color:red;} 点击过要是蓝色 a:visited{color:blue;}如果用css3来设置超链接渐变 试试下面这个 a{ color: red; -webkit-transition: color .4s ease; -moz-transition: color .4s ease; -o-transition: color .4s ease; transition: color .4s ease;}a:visited{color: red}能想到就这么多了，至于JS什么的，百度吧，类似搜索 js超链接渐变吧2023-07-05 17:43:332
Photoshop CC与前端的那些事
自动切图(含WebP、SVG格式)：前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能，无需花更多时间来切图了。只需在图层名后添加相应格式后缀(如.png)，即可自动输出所需格式的图片。请保持菜单“编辑-首选项-增效工具”中的“生成器”为启用状态;依次点击菜单“文件-生成-图像资源”，确认该菜单项已被勾选;试着修改某个图层命名(如 iTunes.png)，然后检查当前 psd 文件所在目录下的“文件名-assets” 的目录，打开此目录，发现 iTunes.png 已经躺在里面了。常用技巧：@2x Retina 图片的输出，在图层前添加 200% 即可，如 200% logo@2x.png ;开启 WebP、SVG 格式的自动输出： 新建 generator.json 文件，内容如下：{"generator-assets": {"svg-enabled": true,"webp-enabled": true}}将此配置文件拷贝至： Windows: (Win+R后输入 %USERPROFILE% )目录下，如 C:Usersxxx Mac OS: $HOME 如“Macintosh HDUsersxxx” 目录下 WebP 输出暂只支持 Mac OS。复制 CSSPhotoshop CC 终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的 CSS 代码。其实不少设计师也很想学习 CSS，有了这个功能，可以让这些爱学习的设计师熟悉 CSS 代码与图形的对应关系;右击图层面板上的图层，选择“复制 CSS”，或点击菜单“图层-复制 CSS”;多个图层的批量获取，请选择多个图层，执行 Ctrl+G，将所选图层转为图层组。然后在该组上右击，选择“复制 CSS”，即可批量获取 CSS 代码。智能对象暂不支持“复制 CSS”功能，您可以栅格化该图层再来使用。当前的版本的此功能，包含了很多冗余信息和不太友好的写法，可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能，您可以下载“PhotoshopCopyCSS”来增强 Photoshop CC 自带的“复制 CSS”功能，提升 CSS 代码的真正采用率;目前的优化有：* 自动识别 CSS Sprite 图片，获取 background-position 信息;* 自动识别是否图标;* 优化 CSS3 渐变、文字、边框、阴影等 CSS 代码;* 优化 RGB 颜色值成 十六进制颜色;* 去除冗余 CSS 属性，如 position, z-index, left, top 等。您也可以反馈更好的建议，让这个功能真正为大家所用。前端开发同学接手的 psd 文档，往往有大量图层，我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。使用此功能可以很方便定位到当前选定图层，非常适合含有大量图层的 psd 文档。另外隔离图层也是个很不错的功能。开启隔离图层功能之后，我们可以通过移动选择工具，点选画布上的内容，找出我们需要的图层将其整理成一个独立的 psd 文件。WebP 插件WebP 是 Google 为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽，目前只有 Google Chrome 浏览器对其原生支持。Photoshop CC 的 Mac OS 版自带输出 WebP 功能。Windows 下您可以下载此插件来输出 WebP 格式。安装后，可以在 Photoshop 菜单“文件-另存为” 对话框中选择“WebP格式图片”。WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win动作条件Photoshop CC 新增了动作条件，可以根据不同条件执行命令或其他动作。智能参考线/使用图层颜色这两个功能并不是 Photoshop CC 的新功能。为什么要在这里说呢，因为它能辅助我们一秒居中对齐、一秒贴边，这个非常实用。另外也建议设计师使用图层颜色来标出改动位置，这样前端开发同学便能快速定位图层。2023-07-05 17:43:491
如何用CSS和jQuery实现一个侧滑导航菜单
可以参考：http://www.cnblogs.com/w2bc/p/5468176.html为了建立导航菜单，让我们先看看html结构：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Animation Menu Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"></head><body> <!-- Content goes here --></body></html>首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。面板按钮每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个div显示为水平横线。<span class="toggle-button"> <div class="menu-bar menu-bar-top"></div> <div class="menu-bar menu-bar-middle"></div> <div class="menu-bar menu-bar-bottom"></div></span>样式看起来如下：.toggle-button { position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15;}.toggle-button:hover { cursor: pointer;}.toggle-button .menu-bar { position: absolute; border-radius: 2px; width: 80%; transition: .5s;}.toggle-button .menu-bar-top { border: 4px solid #555; border-bottom: none; top: 0;}.toggle-button .menu-bar-middle { height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px;}.toggle-button .menu-bar-bottom { border: 4px solid #555; border-top: none; top: 22px;}.button-open .menu-bar-top { transform: rotate(45deg) translate(8px, 8px); transition: .5s;}.button-open .menu-bar-middle { transform: translate(230px); transition: .1s ease-in; opacity: 0;}.button-open .menu-bar-bottom { transform: rotate(-45deg) translate(8px, -7px); transition: .5s;}按钮有一个固定的位置，不动时滚动页面。它也有一个 z-index :15的样式，以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式，我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时，我们添加一个类.button-open。我们引用jQuery，可以比较方便的实现它：$(document).ready(function() { var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); });});初学者可能不熟悉jQuery，让我解释一下这是怎么回事。首先，我们初始化一个变量称为$togglebutton，其中包含我们的按钮。我们将它存储为一个变量，然后我们创建一个事件监视器监听点击按钮。每单击一次，事件监听器会执行方法 function toggleclass()来切换.button-open。.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度，与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。侧滑菜单侧滑菜单的html的结构如下：<div class="menu-wrap"> <div class="menu-sidebar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li class="menu-item-has-children"><a href="#">Click The Arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <li><a href="#">Alignment</a></li> <li><a href="#">Markup</a></li> <li><a href="#">Comments</a></li> </ul> </li> <li><a href="#">Courses</a></li> <li><a href="#">Get In Touch</a></li> </ul> </div></div>在这里不详细解释每个风格的菜单，我们看下.menu-wrap 的div。它的样式如下： .menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10;}它的位置是固定的，所以菜单一直在同一个地方滚动。高度设为100%。注意，左边距设置为负数，使这菜单从视图中消失。为了让它有一个出现的特效，我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下：$(document).ready(function() { var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); });});我们增加一个变量$menuwrap其中包含菜单的所有项，并使用相同的事件来创建按钮。这个.menu-show的左边距为0，并增加了一些盒子阴影效果。.menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD;}子菜单和链接你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时，链接后，有一个class .sidebar-menu-arrow。<li class="menu-item-has-children"><a href="#">Click The Arrow</a><span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <!-- List items --> </ul></li>span 有一个::after伪元素包实现fontawesome箭头。默认情况下，子菜单是隐藏的，只有单击父级菜单时才出现：$(document).ready(function() { var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() { $(this).next().slideToggle(300); });});当我们单击箭头，一个函数被调用时，它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失，函数有一个动画时间参数。最后，我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下：.menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto;}.menu-sidebar li > a:hover::after { background-position: -100% 0;}这个::after伪元素包含在每个环节下绝对定位的块级元素，随着0.15em高度和宽度。我们不只是应用背景颜色的线，我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度，我们可以通过指定的百分比，做了一个渐变的颜色变化。.menu-sidebar li > a::after { background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);}这里一半的线是透明的，另一半是黄色的。通过背景大小200%的宽度，使透明部分占用的所有链接的宽度。2023-07-05 17:43:562
正式的html5+css3 是不是要彻底抛弃div，id，class？
HTML5应该是指基于javascript的大量浏览器操作API，而不只是几个HTML语义化标签。例如： 本地存储相关的localStorage、sessionStorage、indexDB、WEBSQL 等。图形动画相关的：SVG、canvas、WEBGL、webworker。socket通信相关的：基于浏览器客户端的websocket。多媒体相关的：video，audio。文件相关的：FileReader etc.CSS3是指在CSS2规范基础上，高级浏览器可以识别的一些高级行为样式,如：圆角：border-radius；阴影：box-shandow；旋转、动画、背景渐变、等等，诸多特性，以及更加丰富的CSS选择器。HTML5-CSS3的绝大部分特性在IE67上面是根本不能被识别的，因此那些想要推广HTML5-CSS3的站点自己的网站肯定还是不能以这些高级特性为主。PS:目前HTML5-CSS3主要活跃在移动端的智能手机上面，因为手机浏览器的支持还是相当好的。2023-07-05 17:44:045
ie10为什么不支持XP
ie10的版本太高，使用XP系统不能兼容xp系统和现在普遍使用的win7、win8、win10有着很大的差异。他们之间最大的差别就是兼容性的不一样，在内存占用上面也不一样，还有流畅性方面也不一样。在兼容性方面，当下的新类型软件如果放到xp系统上的话肯定会有一些软件是能安装，但是却打不开的，这就是所谓的不兼容。其实这也是到最后使用人数越来越少的原因了，但是小编了解到的是，使用xp系统的多公司，个人用户已经非常非常少了扩展资料：对于开发人员，IE10 增加了对由硬件加速支持的现代 Web 标准的支持，以使开发人员能够开发出引人注目的全新应用，并实现快速而流畅的浏览体验。相对于 IE9，IE10 增加了对 30 多种全新的现代 Web 标准的支持，增幅达 60%。IE10 中的这些新支持的标准包括许多最新的 HTML5、CSS3、DOM、Web 性能和 Web 应用程序规范，这些规范跨越了许多重要的 Web 开发领域，具体包括：创建丰富的可视化效果：CSS 文本阴影、CSS 3D 变换、CSS3 过渡和动画、CSS3 渐变和 SVG 滤镜效果更复杂和响应程度更高的页面布局：CSS3 用于公布质量页面布局和响应应用程序 UI（CSS3 网格、Flexbox、多栏、定位浮点、区域和断字）、HTML5 表单、输入控件和验证参考资料来源：百度百科-ie10百度百科-window xp2023-07-05 17:44:211
用css能画出一个虚线圆？
可以写一套兼容性的写法，区分IE9+ 或 IE9-IE9- 的浏览器需要一个插件，你百度搜 “ie-css3.htc”这个，它可以实现圆角、阴影、渐变的属性那么开始，先建立高和宽100px的容器<div class="radius_50 ie8_7_6"></div>/*css style*/.radius_50 {width:100px; height:100px; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; overflow:hidden; border:2px #000000 dashed;}.ie8_7_6 {behavior: url(/ie-css3.htc);}2023-07-05 17:44:342
利用HTML5开发移动应用有哪些优点
1.离线缓存为HTML5开发移动应用提供了基础HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。在线app支持边使用边下载离线缓存，或者不下载离线缓存;而离线app必须是下载完离线设计师要知道，什么时候让用户下载离线缓存(注意在线和离线app的区别)。2.音频视频自由嵌入，多媒体形式更为灵活原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限制，可以完全放在一起进行处理。设计师要知道，如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在原生方式实现起来还有困难。3.地理定位，随时随地分享位置充分发挥移动设备对定位上的优势，推动LBS应用发展。可以综合使用GPS、wifi、手机等方式让定位更为精准、灵活。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。设计师要知道，现在嵌入LBS功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化，好好想想怎么在你设计的应用里用上吧!4.Canvas绘图，提升移动平台的绘图能力使用Canvas API可以简单绘制热点图收集用户体验资料支持图片的移动、旋转、缩放等常规编辑Canvas – 2D的绘图功能支持Canvas 3D – 3D的绘图功能支持SVG – 向量图支援设计师要知道，图片的移动、旋转、缩放?那都太基础了，自己画都是小case，至于怎么用，好好想想吧!5.专为移动平台定制的表单元素浏览器中出现的html5表单元素与对应的键盘：只需要简单的声明 <input type=”email”> 即可完成对不同样式键盘的调用，简捷方便。设计师要知道，用的时候记得告诉研发同事一声!6.丰富的交互方式支持提升互动能力：拖拽、撤销历史操作、文本选择等Transition – 组件的移动效果Transform – 组件的变形效果Animation – 将移动和变形加入动画支持设计师要知道，HTML5提供的交互方式是非常丰富的，至于用不用得上，那是你自己的事儿喽!7.HTML5使用上的优势更低的开发及维护成本;使页面变得更小，减少了用户不必要的支出;而且，性能更好使耗电量更低;方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。设计师要知道，用户想要什么，HTML5能提供给用户什么。8.CSS3 视觉设计师的辅助利器CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。Selector – 更有弹性的选择器Webfonts – 嵌入式字体Layout – 多样化的排版选择Stlying radius gradient shadow – 圆角、渐变、阴影Border background – 边框的背景支持使用CSS3来完成部分视觉工作，载入速度快，节省代码及图片，也为用户节约了带宽。设计师要知道，一个界面里几十张素材图的方式已经太out啦，赶快让CSS3帮你偷懒。9.实时通讯以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来「仿真」实时的通讯效果，但HTML5提供了完善的实时通讯支持。设计师要知道，应用中嵌入实时通信、信息内容进行实时提醒，HTML5可以帮你实现。10.档案以及硬件支持不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件?这就是HTML5档案的功能中的Drag"n Drop和File API。设计师要知道，移动应用中对于数据传输的需求越来越大，传统的路径选择方式太过于繁琐，快来试试HTML5的拖拽上传功能吧!11.语意化语意化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮助。设计师要知道，HTML5能让搜索更快速、更准确。12.双平台融合的app开发方式，提高工作效率依照目前iPhone/Android 迅速提升市占率的情势来看，未来如果想要在先进的智慧型手机上撰写应用程式，要不是选择使用Objective-C + CocoaTouch Framework 撰写iPhone/iPad 应用程式，就是选择Java + Android Framework 撰写Android 应用程式，如果想要同时支援两种平台，势必要维护两套程式码，对于刚起步的小服务而言也算是个小有负担的维运成本。使用HTML5, CSS3 来撰写Web-based 的应用程式，若要同时支援iPhone 及Android，几乎只需要维护一份程式码(少部份要因应clients 作修改)，而且未来若有其它行动装置拥有支援HTML5 的浏览器，那同样的WebApp 直接就多了一个支援平台。Google 的系列服务使用了不少HTML5 中的cache、storage 及database 规格来做到离线存取程式的效果。因为比起桌面应用程式，行动装置的网路连线更不稳定，而且有时在移动中并无网路可以使用，透过这些技术才能让使用者即使在 无网路环境下继续使用你的webapp。这说明html5主要服务对象还是给予web的应用，并不会对全部app开发造成威胁，这样有利于不同类型应用使 用不同的开发方式，灵活性更强。2023-07-05 17:44:412
如何用Canvas绘制多种图形
HTML5 的标准已经出来好久了，但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是，Canvas 的标准还没有完全确定，不适合大规模用在生产环境。但是，Canvas 的优点也是很明显的，例如在绘制含有大量元素的图表的时候，SVG 往往因为性能问题而无法胜任，例如我见过的一次技术分享会的抽奖环节，虽然效果比较炫，但因为每个头像都是 DOM，利用 CSS3 控制的动画，导致了性能非常低下。此外，随着硬件性能的提高，视频截图、图像处理等功能也逐渐可以在网页上实现了，大多数网站用的是 Flash，但是 Flash 在 Mac 电脑上性能不高，还需要学一些额外的知识。Canvas 则是直接使用 JavaScript 来进行绘图，对 Mac 友好，所以不失为 Flash 的一个继承者。使用 Canvas说了这么多，Canvas 究竟是个啥？英文中 Canvas 的意思是“画布”，不过这里说的 Canvas 是 HTML5 中新出的一个元素，开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单：<canvas id="canvas" width="宽度" height="高度"></canvas>其中 id 属性是所有 HTML 元素都可以用的，Canvas 自带的属性只有后面两个（分别控制宽度、高度），没有其它的了。至于兼容性，CanIUse 上面写了，基础的功能目前用户使用的 90% 的浏览器都支持，所以大部分情况下还是可以放心使用的。注意，一定要使用 Canvas 自带的 width 和 height 属性，不要使用 CSS 来控制，因为 CSS 控制会导致 Canvas 变形。可以试着与 PhptpShop 对比一下，后者是改变“图像大小”，前者才是正确的改变“画布大小”。例如下图是三张图片的横向拼接：最左边的黑框中是大小为 50px * 50px 的原图；中间是改变了图像大小为 100px * 100px 的效果，图像变得模糊，但是对于图像本身来说坐标范围并没有变大；最右边才是正确的 100px * 100px 的 Canvas。Canvas 绝大部分的绘图方法都与 <canvas> 标签无关，需要使用 JavaScript 对其进行操作，这就是所谓的 Canvas API。我们首先获取到这个元素：var canvas = document.getElementById("canvas");然后通过一个方法来获取可以调用一切 Canvas API 的入口：var ctx = canvas.getContext("2d");看到 2d 是不是很激动地联想到有没有 3d 呢？没有 3d 的写法，不过如果想要开启 3D 世界的大门，则可以写 canvas.getContext("webgl")。然而 WebGL 是基于 OpenGL ES 2.0 的一套标准，与本文是彻彻底底的两条路，因此这里就不讨论了。Canvas 中的基本概念坐标与数学上常见的笛卡尔坐标系不太相同，Canvas 的坐标系是计算机中常见的坐标系，它长这样：画布的最左上角是 (0,0)，往右 x 增大，往下 y 增大，而且 x 和 y 都是整数（就算在计算过程中不是整数，在绘制的时候也会当作整数处理），单位是像素。绘图带大家怀旧一下。不知道有多少同学小时候玩过 logo 语言，在里面你可以控制一只小海龟在一块板子上行走、画画、提笔、落笔。Canvas 中也一样，你需要控制一只画笔的移动和绘制。然而 Canvas 更高级一些，你可以直接利用一些函数来画图，不用去控制那只画笔的位置。Canvas 中的基本图形通过上文定义的 ctx 变量可以干许多有意思的事情，我们先看看如何绘制一些基本图形。线条我们指定画笔移动到某一点，然后告诉画笔需要从当前这一点画到另一点。我们可以让画笔多次移动、绘制，最后统一输出到屏幕上。例子如下：ctx.moveTo(10, 10);ctx.lineTo(150, 50);ctx.lineTo(10, 50);ctx.moveTo(10, 20);ctx.lineTo(40, 70);ctx.stroke();上面的代码中，lineTo 是产生线条用的函数，执行完之后画笔就移到了线条的终点。需要注意的是，线条此时并没有显示在屏幕上，必须调用 stroke 才会显示。这样设计是有道理的，因为向屏幕上输出内容需要耗费大量的资源，我们完全可以先攒够一波 lineTo，最后用 stroke 放一个大的。路径绘制路径非常简单，只需要先告诉 ctx 一声“我要开始画路径了”，然后通过各种方法（例如 lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉 ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke 输出到屏幕上。一个简单的例子：ctx.beginPath();ctx.moveTo(10, 10);ctx.lineTo(150, 50);ctx.lineTo(10, 50);ctx.closePath();ctx.stroke();如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的 stroke 改成 fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：ctx.fill();弧 / 圆形绘制弧的函数参数比较多：ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);注意，在 Canvas 的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……所以如果转了 2π 圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：ctx.beginPath();ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);ctx.closePath();最后一个参数随便填（当然也可以不填），因为不管是顺时针还是逆时针，转了 2π 圈之后都是一个圆。矩形如果只是想绘制一个横平竖直的矩形，可以使用下面的两个方法：// 只描边ctx.strokeRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);// 只填充ctx.fillRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);线条样式 / 填充样式之前绘制的所有图形都是黑色的，但是 Canvas 肯定不止这么一种颜色（不然标准的制定者会被喷的很惨）。事实上，Canvas 可以单独设置线条样式和填充样式，分别使用的是 strokeStyle 和 fillStyle。可能的值有三种：纯色、渐变、图像。既然线条样式与填充样式的使用方法相同，那么下面统一以填充样式为例。如果想设置线条样式，直接将所有的 fillStyle改成 strokeStyle 即可，里面的参数都不变。/* 纯色填充 */// 普通的颜色ctx.fillStyle = "#0000ff";// 带有透明度的颜色ctx.fillStyle = "rgba(64, 0, 127, 0.5)";/* 渐变填充 */// 设置渐变的尺寸（参数分别为起始点的 x 和 y、终止点的 x 和 y）var gradient = ctx.createLinearGradient(0, 0, 170, 0);// 设置过渡色，第一个参数是渐变的位置，第二个参数是颜色gradient.addColorStop(0, "magenta");gradient.addColorStop(0.5, "blue");gradient.addColorStop(1.0, "red");// 设置填充样式ctx.fillStyle = gradient;/* 图片填充 */// 创建图片var image = new Image;image.src = "/path/to/image.png";// 创建图片笔触，可以指定图片的平铺方式，这里是横向平铺var pattern = ctx.createPattern(image, "repeat-x");// 设置笔触填充ctx.fillStyle = pattern;关于渐变，除了代码中提到的线性渐变以外，还有 createRadialGradient，也就是径向渐变。设置完填充样式之后，就可以使用 fill 来填充啦！如果设置的是线条样式，那么就可以使用 stroke 来描边。当然，对于线条样式，还有个额外的方法叫 lineWidth 可以用来控制线条的宽度。文字要想在画布上画文字，首先需要知道所使用的字体和字号：ctx.font = "30px Verdana";然后就可以通过 strokeText 或者 fillText 来对字体描边或者填充字体。ctx.strokeText("Hello Coding!", 23, 33);ctx.fillText("Hello Coding!", 23, 66);图片在 Canvas 中绘制图片有三种方法：// 指定绘制位置ctx.drawImage(image, x, y);// 指定绘制位置和图像宽高ctx.drawImage(image, x, y, width, height);// 指定剪裁区域、绘制位置和图像宽高ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);参数的含义依次如下：image: 要使用的 Image、Canvas 或 Videosx: 可选，开始剪切的 x 坐标sy: 可选，开始剪切的 y 坐标swidth: 可选，被剪切图像的宽度sheight: 可选，被剪切图像的高度x: 在画布上放置图像的 x 坐标y: 在画布上放置图像的 y 坐标width: 可选，要使用的图像的宽度height: 可选，要使用的图像的高度画布设置细心的同学可能会发现，刚才有些属性是直接对 ctx 变量做设置，例如 ctx.lineWidth，只要设置了它，那么后续画出来的线条全都是这么个宽度。其实，Canvas 的设置项还有许多，例如我们可以直接移动画布、旋转画布、设置全局的绘制透明度等等。这些设置还可以随时保存和恢复。要注意的一点是，所有已经画在画布上的东西，是已经定死了的，不管之后再次进行任何设置都不会再改变。这个很像 Windows 下的画图程序。废话不多说，直接上代码：// 移动画布，其实就是移动坐标系ctx.translate(往右移动的量, 往下移动的量);// 旋转画布，旋转中心为坐标系原点ctx.rotate(顺时针旋转的角度);// 以坐标系原点为中心缩放画布ctx.scale(横向放大倍数, 纵向放大倍数);// 设置绘制透明度，如果 fillStyle 等属性设置了透明度则会叠加ctx.globalAlpha(零到一的小数);// 设置全局组合操作ctx.globalCompositeOperation = "lighter";// 保存当前设置ctx.save();// 恢复上次保存的设置ctx.restore();移动、旋转、缩放其实就是在控制绘图的坐标系，如果你在调用这三个方法的时候，脑子里时刻有一个带刻度的坐标系，效果会非常好。事实上，Canvas 的坐标变换遵循计算机图形学的知识：变换矩阵。简单来说，一个坐标可以看成是一个矩阵，坐标所对应的矩阵乘上变换矩阵就可以实现对坐标的变换。为了提升计算的效率，可以先计算出几种变换复合之后的变换矩阵，然后直接通过 transform 函数对当前坐标系进行变换，或者通过 setTransform 函数将坐标系重置为初始状态后再进行变换。至于变换矩阵的内容，对于本文来说就有些超纲了。全局组合操作有点像 PhotoShop 里面的“混合选项”，具体的实现方式还没有完全确定，目前常见浏览器都统一了的实现方式有：source-over、source-atop、destination-over、destination-out、lighter、xor。具体的行为可以看 Mozilla 官方文档，但是由于标准还未完全确定，因此其它浏览器不保证所有的行为都跟 Mozilla 的标准一致。一般来说，比较常见的是 source-over 和 lighter 两种，这两种的标准在浏览器界也算是无可争议的。至于保存和恢复设置就有点好玩了，首先需要了解一个叫“栈”的东西。栈是一个一维数组，规定只能从一个方向操作。栈一开始是空的，我们可以从这个方向往数组 push 元素，也只能从这个方向把最后一个元素（栈顶元素）pop 出来，除此以外没有任何多余的操作。当然，pop 的次数不能多于 push 的次数，因为 pop 到栈底的时候栈里就已经没有元素了，此时再 pop 是没有意义的。栈的用处有很多，例如括号匹配、表达式求值、深度优先搜索，甚至绝大部分语言的函数调用都要用到栈。每次我们调用 save 函数，实际上是将当前的全局设置 push 到了一个专门栈上，每次调用 restore 函数的时候将最后一次保存的内容 pop 出来并用它覆盖当前的全局设置，这样栈顶就是最近一次保存的内容了。保存和恢复在某些情况下很好用，例如我需要画一个歪着的图形，然后继续画正着的图形，这样就可以先调用 save，然后调用 rotate，画完图形之后再 restore 回来，继续画其它的图形。其实 Canvas 还有许多方法，例如 toDataURL 直接将当前画布上的内容转换为十六进制的 data-url，getImageData直接将图像转换为 RGBA 数组以供图像处理算法使用，putImageData 将 RGBA 数组转换为图片显示在画布上等等。如果配上 JavaScript 的定时更新（最好用 requestAnimationFrame 而不是 setInterval），则可以产生动画效果。网上还有许多 Canvas 的库，可以让程序员更简便地基于 Canvas 编写属于自己的特效或功能。在这儿我想说一句话：大家的脑洞有多大，Canvas 的能力就有多强~2023-07-05 17:44:481
css3旋转半径的计算
在代码的编写中，我们常常会用到通过css3实现各种图片和文字的旋转，下面我就列出常见的七种方法： 一、圆角（Rounded Corner） .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera 10.5, IE 9 */ } 圆角的实现比较简单，只要设好一个半径值就可以了。遗憾的是，目前所有的IE都不支持CSS圆角，要等到IE 9才行。 二、盒状阴影（Box Shadow） .box_shadow { -moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */ -webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */ box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */ filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color="#ffffff"); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color="#ffffff")"; /* IE8 */ } -moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的，都有4个参数，含义分别为：x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。 IE 6~8使用其独有的滤镜，需要设置三个参数：offX（X轴偏移值）、offY（Y轴偏移值）、Color（阴影颜色）。 三、线性渐变（Gradient） .box_gradient { background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#444444", endColorstr="#999999", GradientType="0"); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#444444", endColorstr="#999999",GradientType="0")"; /* IE8 */ } 先看Firefox。 -moz-linear-gradient(top, #444444, #999999); -moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。 -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); -webkit-gradient是webkit引擎对渐变的实现，一共有五个参数。第一个参数表示渐变类型（type），可以是linear（线 性渐变）或者radial（辐射渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示， 比如left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为 起点，0.5为中点，1为结束点；第二个表示该点的颜色。 DXImageTransform.Microsoft.gradient(startColorstr="#444444", endColorstr="#999999", GradientType="0"); IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。 四、透明（opacity） 正常情况下，上层的对象会覆盖下层的对象。 但是，如果将上层对象的颜色变为透明，就可以透过它看到下层对象。 .box_rgba { background-color: #B4B490; background:transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#99B4B490",endColorstr="#99B4B490"); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#99B4B490",endColorstr="#99B4B490")"; /* IE8 */ zoom: 1; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */ } 先看第一行。 background-color: #B4B490; 这是设置对象的预备色，也就是不透明时的颜色。如果浏览器不支持透明，就将显示这个颜色。 background:transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#99B4B490",endColorstr="#99B4B490"); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#99B4B490",endColorstr="#99B4B490")"; /* IE8 */ zoom: 1; 这几行是专门为IE写的，其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色（startColorstr）和终点色 （endColorstr）。在单色透明的情况下，这两个值是相同的。需要注意的是，它们的取值是一个八位的十六进制值，前两位表示alpha通道 值，00表示完全透明，FF表示完全不透明；后六位则是这个颜色的RGB值。 background-color: rgba(180, 180, 144, 0.6); 除了IE，其他浏览器几乎都支持rgba函数。它有四个参数，前三个为一种颜色的RGB值，第四个为透明度，这里设为0.6。 五、旋转（rotation） .box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod="auto expand"); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod="auto expand")"; /* IE8 */ } 除了IE以外，其他浏览器都是用rotate函数，实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度（degree）。 IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数，前四个参数需要自行计算三角函 数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数 SizingMethod表示重绘方式，"auto expand"代表自动扩展到新的边界。 除了这个滤镜，IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1，2，3，0，分别表示顺时针选择90度、180度、270度和360度。 六、服务器端字体（font-face） 设计网页的时候，可能会用到某种特殊的字体。如果用户的机器中没有安装，文字只能以普通字体显示。 这时可以让用户的浏览器自行下载服务器端字体，然后就能呈现出设计者想要的效果。 @font-face { font-family: "MyFont"; src: url("myfont.eot"); /* IE6+ */ src: local("myfont.ttf"), url("myfont.woff") format("woff"), /* FF3.6 */ url("myfont.ttf") format("truetype"); /* FF3.5+, Saf3+,Chrome,Opera10+ */ } 第一行代码： font-family: "MyFont"; 表示为这种字体起一个名称，可以随意设置，我这里用的是MyFont。 src: url("myfont.eot"); 这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的。 src: local("myfont.ttf"), url("myfont.woff") format("woff"), url("myfont.ttf") format("truetype"); local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体 格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype。 然后，使用的时候这样写就可以了。 h2{ font-family: "MyFont"; } 需要注意的是，字体文件必须与网页文件来自同一个域名，符合浏览器的“同源政策”。另外，由于中文字体文件太大，服务器端字体显然只适用于英文字体。 七、其他 利用css3，还可以完成transform（变形），包括skew（扭曲）和scale（缩放），以及css transitions（动态变换）。2023-07-05 17:44:571
css3 background-image linear-gradient渐变色 transition 无效
在开发过程中遇到一个需求，要实现渐变色的背景之间的过渡切换，而css3的transition属性对于background-image不生效 想了很久之后，想到一个办法，利用两个div来设置不同的渐变的背景色，再通过改变div的透明度，实现渐变色之间的过渡，效果还不错 （图片被压缩了效果看起来没这么好，可以点击查看原图）2023-07-05 17:45:211
html5+css3怎样设置动效图片
动画 渐变 平移2023-07-05 17:45:281
IE9以下浏览器对CSS3的常用兼容处理
html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。 respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 官方网站： http://css3pie.com/ 演示地址： http://css3pie.com/demos/gradient-patterns/ 1.兼容border-radius; 2.阴影效果; 3.部分 CSS3 的效果，如 多张背景图，border-image，背景颜色渐变效果; 4.png 图片透明效果;2023-07-05 17:45:351
CSS3 动画
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。 CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ； transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下： none 表示不做变换； <transform-function> 表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如： 所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。 用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如： 它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。 移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等; 扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。 矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性： 它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值： 它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0； 它是来设置过渡效果的速率，它有6种形式的速率： 它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0； 它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写： animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。 它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开： 它是用来设置动画的持续时间，单位为 s ，默认值为 0 ： 和 transition-timing-function 类似： 它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0： 它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环： 它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放： 它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值： 它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写： 关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。2023-07-05 17:45:411
CSS3都有哪些新特性呢？
第 1 选择器 第 2 RGBA和透明度 第 3 多栏布局 第 4 多背景图 第 5 Word Wrap 第 6 文字阴影 第 7 @font-face属性 第 8 圆角(边框半径) 第 9 边框图片 第 10 盒阴影 第 11 盒子大小 第 12 媒体查询 第 13 语音2023-07-05 17:46:041
css3新特性有哪些
CSS3 新特性包括CSS3 选择器（Selector）@Font-face 特性、Word-wrap & Text-overflow 样式Text-decoration多列布局（multi-column layout）边框和颜色，颜色支持透明度（color, border）渐变效果（Gradient）阴影（Shadow）和反射（Reflect）效果盒子模型Transitions, Transforms 和 Animation比如：@Font-face 特性@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } @font-face { font-family: Runic; src:url(RUNICMT0.eot); } .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }更多参考：http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/2023-07-05 17:46:412
css3有哪些新特性 包含哪些模块
1、CSS3圆角表格圆角表格，对应属性：border-radius。2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。 边框（Borders） border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果 border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象 border-radius:能产生类似圆角矩形的效果背景（Backgrounds） background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content border:控制背景起始于左上角的边框 padding:控制背景起始于左上角的留白 content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding border:会覆盖住背景 padding:不会覆盖背景 background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定 multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。文字效果（Text effects） text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。 text -overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。颜色（Color） HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%） HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2） opacity:直接控制不透明度，用0到1之间的数来表示 RGBA colors:和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。 实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。 经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。用户界面（User-interface） resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局选择器（Selectors） CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。 Attribute selectors:在属性中可以加入通配符，包括^,$,* [att^=val]:表示开始字符是val的att属性 CSS3选择器[att$=val]:表示结束字符是val的att属性 [att*=val]:表示包含至少有一个val的att属性其它模块： （Other modules） media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。 multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值 column-width:指定每列宽度 column-count:指定列数 column-gap:指定每列之间的间距 column-rule-color:控制列间的颜色 column-rule-style:控制列间的样式 column-rule-width:控制列间的宽度 column-space-distribution:平均分配列间距2023-07-05 17:46:491
css3 logo 扫光效果怎么控制高光的高度
效果解析 我们分析一下实现这个效果需要实现的功能: 实现一个扫光背景块，因为光是移动的，所以要加入渐变效果 (例如: 手电筒照射的一小块区域) 将扫光背景块控制到文本上 (即实现文本背景) 实现扫光动画 (扫光块从左往右循环移动) 思路理清了，接下来就是一步一步实现了 背景渐变 -webkit-linear-gradient (形成扫光背景块) background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat; background-size: 80px 默认背景为黑色，从左往右产生黑白渐变效果，背景位于左上角，不重复，背景大小80x80 (扫光背景块) 背景范围 -webkit-background-clip (实现文本背景) 为了实现文字扫光，我们必须把上一步形成的扫光背景块，控制在文字上面 background-clip 有三个属性: border-box, padding-box, content-box (具体效果不细说了) 显然这些属性并不能满足我们的这个需求，并没有可以控制文字背景的属性 但是在 webkit 下 background-clip 就有这样一个属性，那就是 background-clip: text 通常会配合其私有属性 -webkit-text-fill-color (填充文本颜色) 一起使用 背景动画 (扫光动画) @-webkit-keyframes slideShine { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } } 通过调整背景的位置(从左往右)，来达到扫动的效果 效果实例 CSS Code .bg { background: #000; width: 1000px; height: 300px; margin: 0 auto; padding-top: 100px; } .slideShine { width: 1000px; font-family: "Microsoft YaHei"; font-size: 60px; text-align: center; background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat; -webkit-background-size: 80px; -webkit-background-clip: text; -webkit-text-fill-color: rgba(255, 255, 255, 0.3); -webkit-animation: slideShine 3s infinite; } @-webkit-keyframes slideShine { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } } HTML Code <div class="bg"> <p class="slideShine">Welcome to xinpureZhu Blog</p> </div> 效果示图2023-07-05 17:47:081