• 不断学习才有回报,学无止境!

标签:CSS3

DIV+CSS技巧发现

css3的常用效果及应用方法

css3的常用效果及应用方法
1, 替代图片:很多修饰的效果传统方式是使用图片,不仅影响加载速度而且不易维护,采用CSS3后不仅可以实现绚丽的视觉效果,而且可以随时修改代码改变效果,甚至是通过程序动态改变代码效果;2, 定义不规则形状,打破栅格束缚:之前的网页元素全都是矩形的空间站位,无法定义一个不规则的形状,即使用图片做出一个不规则图形,其在网页上的占位仍是一个矩形,只是周边是空白的……继续阅读 »

8年前 (2014-08-20) 778浏览 0评论

DIV+CSS技巧发现

CSS3:Transform-变形处理

CSS3:Transform-变形处理
transform:使用transform功能实现四种文字或图像的变形处理,分别是旋转、缩放、斜切以及移动。none: 无转换matrix(<number>,<number>,<number>,<number>,<number>,<number>): 以一个含六值的(a,b,c,d,……继续阅读 »

8年前 (2014-07-27) 813浏览 0评论

DIV+CSS技巧发现

css3的 calc()自适应布局属性

css3的 calc()自适应布局属性
我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。ca……继续阅读 »

8年前 (2014-07-21) 2182浏览 1评论

DIV+CSS技巧发现

CSS3 :nth-child()伪类选择器

CSS3 :nth-child()伪类选择器
语法::nth-child(an+b)为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。描述:伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写……继续阅读 »

8年前 (2014-06-10) 692浏览 0评论

DIV+CSS技巧发现

CSS3圆角

CSS3圆角
CSS3的圆角很不错,只用代码就能解决边框的圆角,不过兼容是个问题!例:<strong>#roundCorderC{font-family: Arial;border: 5px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px;padding: 1……继续阅读 »

8年前 (2014-04-16) 679浏览 0评论

DIV+CSS技巧发现

用背景渐变的透明度设置不同颜色的背景渐变

用背景渐变的透明度设置不同颜色的背景渐变
项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色。我上网查了些资料,现在也有js支持根据你输入的网页内容自动填充渐变色,但是对于我这种js不是很好的人来说,还是想从css3上找点方法……继续阅读 »

8年前 (2014-03-31) 678浏览 0评论

DIV+CSS技巧发现

CSS3匹配屏幕横竖状态

CSS3匹配屏幕横竖状态
@media是css3中新定义的,功能非常强大,下面简单讲解一下用css3的@media orientation匹配手机屏幕是横屏还是竖屏。顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效。1.头部声明<meta name=”viewport” content=”width=devic……继续阅读 »

8年前 (2014-03-23) 605浏览 0评论

DIV+CSS技巧发现

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看……继续阅读 »

8年前 (2014-03-19) 674浏览 0评论