三个CSS渲染方法

这篇博客分享了三种实用的CSS渲染技术:1) 设置背景线性渐变色,适应不同浏览器的写法;2) 创建文本阴影效果,通过多层叠加增强视觉层次感;3) 使用:hover伪类实现字体放大,提升交互体验。作者感叹前端技术更新快速,但同时也表达了不断学习的热情。
摘要由CSDN通过智能技术生成

CAA的开发总是让我产生畏难情绪,参考资料的稀缺总是让开发进程举步唯艰,而其应用的专业性,应用面的狭窄,又让我难以深入其中。刚好一个朋友需要做一个Web App应用,我就想以此为契机进入Web的前端开发。
虽然前几年涉足过Web的前端乃至后端开发,对这个方向不算陌生,怎奈前端技术发展迅猛,各种框架技术层出不穷,层层封装,功能日强,极简的代码却有极强的功能,而代码的可读性也不敢恭维,纵有数十年的功力,也是茫然。做程序员,确实是个苦差,真的是活到老,学到老,悲也?幸也?…
言归正传,还是来看看那三个有用的CSS渲染方法:
1、背景线性渐变色的设置
这个是CSS的新特性,有的浏览器可能不支持,不同的浏览器支出的方式有差异,要适应不同的浏览器,得考虑多种情况。
在style的设置background特性:如
background: -webkit-linear-gradient(right, #777777, #ffffff);
这里gradient有三个参数:第一个设置渐变方向,这里是从右
至左。第二是起始颜色,第三是结束颜色。
这个函数适合:chrome浏览器,其它的如IE为
-ms-linear-gradient()、-moz-linear-gradient()设置方式类似。
还可以设置辐射式的渐变,方式类似。
2、设置投影效果。
特性:text-shadow:
方式:text-shadow: 1px 1px 0 #CCC,2px 2px 0 #CCC,3px
3px 0 #CCC,4px 4px 0 #CCC,5px 5px 0 #CCC,6px 6px 0
#CCC;
这里设置了六层,简单的可以为1层。
3、字体放大。当鼠标移动到对象上方是,可以放大字形。
h3:hover
{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
这个例子实现了鼠标在3号标题上时,放大1.2倍。适应多种浏
览器。

时间关系,简单记录一下,以备后用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值