css3高级属性

-webkit-mask

-webkit-mask让 为一个元素添加蒙板
-webkit-text-stroke 为文字添加边框
text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
-webkit-margin-collapse
这个属性属于限制级的,但是它还是非常值得关注。通常,两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。
-webkit-box-reflect 元素倒影
-webkit-marquee
另一个属性让我们回到美好的从前:那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用,比如我们在比较小的手机屏幕上切换内容,如果不断行的话文字将不能完全显示。
ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字,可以尝试换一个城市来体验。需要使用WebKit内核浏览器)
示例
.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}
image-rendering 图片原始大小显示
-webkit-user-select 和 -moz-user-select
或许你常常不希望用户在你的网站上选择文本,无论是否是出于版权的原因。通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none。
resize
如果你在使用Firefox或Chrome,那么你肯定注意到了文本框的右下角默认有个小的手柄,它可以让你调整它们的大小。这个标准的行为由CSS3 属性 resize: both实现。
background-attachment
当你为一个设置了overflow:auto的元素指定背景图片的时候,当内容太多而出现滚动条后,拖动滚动条就会发现背景图片的位置是固定的,而不是随着滚动条移动。如果你想要背景图片随着内容而滚动,可以设置background-attachment:local。
text-rendering
随着越来越多的网站开始用@font-face来渲染文字,易读性开始被关注了。小号字体上,文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节,你可以利用text-rendering来启用kerning 和 ligatures。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值