前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫伪类，两者容易混淆)，没有它画不成图形的。a）伪元素：用来在内容元素的前后插入额外的元素，之所以叫伪元素，就是它们根本就不在文档中生成，只能在外部可见，比如：你F1...
CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来总结CSS3的新特性来总结垂直居中的实现方法分享:0.单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了.middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; }优点：（1）. 同时支持块级和内联极元素（2）. 支...
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class="a"]只能匹配class="a"的元素2.[class~="a"]则可以匹配class="a"、class="a b"的元素3.[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：1.*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；2.^=表示以指定字符开头，[href^="/"]则匹配...
本文介绍了Css3新特性应用之视觉效果，具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果，具体实现如下：一、单侧阴影1、box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow：水平阴影的位置，允许负值①v-shadow：垂直阴影的位置，允许负值②blur：模糊距离③spread：阴影的尺寸，扩张距离，可以为负数④color：阴影的颜色⑤inset/outset：内部或者外部阴影2、阴影的扩张...
一、自适应椭圆 border-radius特性：可以单独指定水平和垂直半径，并且值可以是百分比，用/（斜杠）分隔这两个值即可（可以实现自适应宽度椭圆）。还可以单独指定四个角度不同的水平和垂直半径（可以实现半椭圆） 四分之一椭圆，主要是调整水平和垂直的半径示例代码：.wrap{border-radius: 50% / 30%;width: 60px;height: 80px;background: yellow;}.wrap02{width: 60px;height: 80px;background: yellow;border-radius: 50% / 100...
接触CSS3这么久了，总是到要用的时候直接拿来用，却没有好好地总结归纳一下，那就在这里好好梳理一下吧。CSS3边框：圆角边框：关键：border-radius<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; width:350px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; } </style> </head> <body><div>圆角边框</div></body> </html>CSS3边框阴...
如何检测css特性如果我们要检测一个css属性是否支持var dom = document.createElement(p); if (textShadow in dom.style) {alert(支持textShadow属性) } else {alert(不支持textShadow属性) }如果我们要检测该css3属性是否支持某值var dom = document.createElement(p);dom.style.backgroundImage = linear-gradient(red, tan);if (dom.style.backgroundImage) {alert(支持该属性值); }else {alert(浏览器不支持该属性值) }如何动态...
容易被忽略CSS特性CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的.test{ background-COLOR:#a00; width:100px; height: 100px;}虽然把background-color写为了background-COLOR，但仍然会生效，之所以写成小写是因为xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易...
background:rgba(254, 255, 200, 0.75); 例如上面代码所示，前三个参数分别是分别是 R、G、B 三原色，范围是 0-255。第四个参数是背景透明度，范围是 0-1，如 0.5 代表透明度 50%。这个属性使我们在浏览器中也可以做到像 Win7 一样的半透明玻璃效果。 css3圆角示例代码 /*FireFox 语法 */ -moz-border-radius: 6px 6px 6px 6px; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bott...
本系列主要总结Css3一些新特性的认识，来源于《css揭秘》书。一、半透明边框css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1)background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box（背景颜色扩散到padding）；content-box（背景颜色扩展到content)示例代码：width:200px; height:200px; background: rebeccapurple; border: 10px s...
Atitti css3 新特性attilax总结 图片发光效果2透明渐变效果2文字描边2背景拉伸2 CSS3 选择器（Selector）4@Font-face 特性7Word-wrap & Text-overflow 样式9Word-wrap9Text-overflow10文字渲染（Text-decoration） 描边12CSS3 的多列布局（multi-column layout）13边框和颜色（color, border）14CSS3 的渐变效果（Gradient）15线性渐变15径向渐变16CSS3 的阴影（Shadow）和反射（Reflect）效果19CSS3 的背景效果21CSS3 的盒子模...
一、DNS 预解析缓存 众所周知，解析 DNS 是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。如果采用 DNS 预加载，支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单： 代码如下:淘宝网就应用...
先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。 看一下实现的代码：/* 上三角 */ .arrow-up {width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid green; }/* 下三角 */ .arrow-down {width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px soli...
CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。【推荐教程：CSS3教程】一...
本篇文章给大家带来的内容是关于CSS3有哪些新特性？CSS3新特性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。【推荐教程：CSS教程】CSS3有哪些新特性？新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}弹性盒模型 display: flex;多列布局 column-count: 5;媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.e...