解决css3引入中文字体无效问题（中文字体处理工具整合：字体转换、汉字去重复、字体剪裁）
==============2017年12月04日更新=============== 之前内容中提到的字体剪裁文件：http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0 经过测试发现对于一些中文字体并不能起到剪裁 …
分类目录归档: html5+css3 - 第3页
一个关于@media screen and (max-width:)尺寸的问题
相信大家应该都知道使用@media screen能够解决移动web开发的多分辨率问题。可以在<head>里引用，也可以写在css里。 不过今天我发现一个问题，就是ie浏览器跟其他浏览器对 @media screen里设定的屏幕尺寸的识别是不一样的。比如@media screen and (max-width …
outline是什么，outline与border有什么区别
在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。 CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其配套的相关属性包括： outline outline-width outline-style o …
css绘制梯形
用css绘制梯形或者其他多边形其实是巧妙利用border来实现的。首先我们先看一个图形 其代码是 .tixing{ height: 0; width: 0; border-top: red 70px solid; border-right: blue 70px solid; border-bottom: green 7 …
超强大：用css在单个div上绘图
第一个就是一支绿色的蜡笔。 蜡笔由两个基础图形构成：矩形的笔身和三角形的笔尖。 我必须实现下面这些点来捕获真实蜡笔的感觉： 纸质包装上不同的颜色 印刷在包装上的形状和文字 条纹暗示蜡笔是圆的 明暗效果，暗示圆形的蜡笔和光源 首先，我使用 Div 和 background 颜色制作蜡笔的身体部分，从顶部到底部渐变，并使用 …
浏览器 CSS Hack 收集
所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。 Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } …
css阴影：box-shadow属性解析
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS …
css3背景色渐变
css3背景色渐变难是不难，就是麻烦。不同浏览器用法不同，还有个爱掺和的ie。。。 一. Webkit浏览器 (1) 第一种写法： background:-webkit-gradient(linear ,10% 10%，100% 100%， color-stop(0.14,rgb(255,0,0)), color-st …
css z-index属性不起作用的原因及解决方法
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 1.第一种情况（z-index无论设置多高都不起作用情况）： 这种情况发生的条件有三个： 1、父标签 position属性为relat …
web前端：CSS书写规范
写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。 CSS书写顺序 1.位置属性(position, to …