视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
css3中一些隐藏的高级属性之混合属性用法详解
2020-11-27 18:50:37 责编:小采
文档

-webkit-user-select 和 -moz-user-select

或许你常常不希望用户在你的网站上选择文本,无论是否是出于版权的原因。通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none。

请谨慎使用这个属性:因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效。如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容。搞不懂这个属性为什么会被webkit和gecko支持。

浏览器支持: WebKit, Gecko.

-webkit-appearance 和 -moz-appearance

你曾经想过将一张图片伪装成单选按钮么?或者,一个输入框看起来像一个复选框?那么现在appearance 出现了。即便你并不想要让一个链接看起来总是像个按钮,下面这个例子也可以让你了解到,只要你愿意就可以做到的:

示例

 a {
-webkit-appearance: button;
-moz-appearance: button;
}

浏览器支持: WebKit, Gecko.

text-align: -moz-center/-webkit-center

这是一个属性(或者精确来说,是个“属性值”)的存在很让人惊喜啊。要让一个块级元素居中,大家通常将其设置为margin:0 auto。但是,现在你也可以将元素的容器的text-align属性设置为-moz-center 和 -webkit-center。相应的,你也可以通过设置-moz-left、-webkit-left或-moz-right、-webkit-right将元素居左或者居右。

浏览器支持: WebKit, Gecko.

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮,设置颜色的alpha值为0即可。

示例:设置高亮色为50%透明的红色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

outline:none(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"(2)input,textarea{outline:none} 取消chrome下默认的文本框聚焦样式(3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性,其实是多余。

webkit-appearance -webkit-appearance: none; //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 。 注意:不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失。

下载本文
显示全文
专题