您当前位置: 首页 »

css实用代码

标签归档: css实用代码

css3 animation 制作闪烁的箭头

本案例主要实现箭头自相向上滑动,同时变大变透明的效果。一般在手机端起到引导用户向上滑动页面的作用。 大概思路就是用到css3动画,动画分解成三个部分:1、位移,2、缩放,3、透明度变换。 位移就是bottom或者top、left、right的变化,缩放就是width,height,透明度自然是 opacity。 箭头样 …

read more

css3透明渐变绘制两端透明渐变的分割线

项目需求:绘制一条两端透明渐变的分割线,样式如下: 思路:当然可以用png格式的图片来代替,这样最兼容,但是最好是用css3来制作。用到的是css3的线性渐变属性:linear-gradient与颜色透明属性rgba的结合使用 详细的css3代码很简单: .fgx{ width:100%; height:3px; ba …

read more

解决css3引入中文字体无效问题(中文字体处理工具整合:字体转换、汉字去重复、字体剪裁)

==============2017年12月04日更新=============== 之前内容中提到的字体剪裁文件:http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0 经过测试发现对于一些中文字体并不能起到剪裁 …

read more

一个关于@media screen and (max-width:)尺寸的问题

相信大家应该都知道使用@media screen能够解决移动web开发的多分辨率问题。可以在<head>里引用,也可以写在css里。 不过今天我发现一个问题,就是ie浏览器跟其他浏览器对 @media screen里设定的屏幕尺寸的识别是不一样的。比如@media screen and (max-width …

read more

css绘制梯形

用css绘制梯形或者其他多边形其实是巧妙利用border来实现的。首先我们先看一个图形 其代码是 .tixing{ height: 0; width: 0; border-top: red 70px solid; border-right: blue 70px solid; border-bottom: green 7 …

read more

超强大:用css在单个div上绘图

第一个就是一支绿色的蜡笔。 蜡笔由两个基础图形构成:矩形的笔身和三角形的笔尖。 我必须实现下面这些点来捕获真实蜡笔的感觉: 纸质包装上不同的颜色 印刷在包装上的形状和文字 条纹暗示蜡笔是圆的 明暗效果,暗示圆形的蜡笔和光源 首先,我使用 Div 和 background 颜色制作蜡笔的身体部分,从顶部到底部渐变,并使用 …

read more

浏览器 CSS Hack 收集

所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。 Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } …

read more

css阴影:box-shadow属性解析

box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS …

read more

css3背景色渐变

css3背景色渐变难是不难,就是麻烦。不同浏览器用法不同,还有个爱掺和的ie。。。 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(255,0,0)), color-st …

read more

css z-index属性不起作用的原因及解决方法

在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。 1.第一种情况(z-index无论设置多高都不起作用情况): 这种情况发生的条件有三个: 1、父标签 position属性为relat …

read more