webkit内核浏览器的CSS写法
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明
-webkit-user-select: none; 设置为无法选择文本
-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片
:-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop)
div p :matches(em, b, strong) {} 使用mathes来匹配多个选择器
@media only screen and (max-width: 480px) {} 指定Mobile设备或者小屏幕桌面屏幕
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { 指定高分辨率屏幕设备
header { background-image: url(header-highres.png); }
}
@media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 指定低分辨率屏幕设备
header { background-image: url(header-lowres.png); }
}
background-repeat: space; background-repeat: round; 这两种CSS3的背景属性值得研究
width: calc(100%-40px); 计算宽度
text-decoration: #FF8800 wavy ine-through; 波浪型链接
text-rendering: optimizeLegibility; 用这个属性之后会收紧字符间的距离
font-variant-ligatures: common-ligatures; 设置CSS连字
transform: rotate(90); 旋转90度
transform-origin: center center; transform-origin可以改变变换的位置
-webkit-appearance: none; -webkit-appearance可以改变按钮或者其它控件看起来类似本地的控件
美化表单校验时的提示样式
::-webkit-validation-bubble {}
::-webkit-validation-bubble-message {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-arrow-clipper {}当提示出现时类似于下面的结构
<div -webkit-validation-bubble>
<div -webkit-validation-bubble-arrow></div>
<div -webkit-validation-bubble-arrow-clipper></div>
<div -webkit-validation-bubble-message>Error Message</div>
</div>自定义webkit浏览器的滚动条, 见Google Reader等在Chrome/Safari下的效果, 下面是一个实例, 这个滚动条的样式代码如下:
Customized WebKit Scrollbar /* Let´s get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}-webkit-background-composite: plus-darker; -webkit-background-composite用来设置一个元素的背景或颜色的组合样式
-webkit-text-stroke: 1px rgba(0,0,0,0.5); -webkit-text-stroke可以用来给文字添加描边
-webkit-mask-image: url(/path/to/mask.png); 定义一个图片用来遮罩元素
-webkit-box-reflect: below 5px; 定义了一个元素的反射
:local-link {font-weight: normal;} local-link可以定义相对地址的链接样式
转载于:https://www.cnblogs.com/wcp-spring/p/3927901.html
webkit内核浏览器的CSS写法相关推荐
- 八大Webkit内核浏览器
列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比. PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对其他IE内核浏览器很感兴趣<抛弃数据!用体验和感觉 ...
- C# webkit 内核浏览器 访问https网站 显示空白或者提示 Problem with the SSL CA cert (path? access rights?)
如题 解决方法: 安装中文路径,经常 出现问题.改下安装路径. 只需要动态链接库所在路径上没有中文字符,webkit内核浏览器就可以访问https网址. 转自:C# webkit 内核浏览器 访问ht ...
- webkit内核 css,纯CSS改变webkit内核浏览器的滚动条样式
基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下: 复制代码代码如下: ::-webkit-scrollbar/*整体部分*/ { width: 10px; height:10px ...
- -webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线 ...
- 修改webkit内核浏览器滚动条样式(修改element-ui table样式)
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条 ...
- WebKit 内核浏览器 initKeyboardEvent 函数原型
学习JS发送自定义键盘(KeyboardEvent)事件的过程中,遇到了一个小难题:单个按键Tab可以正常发送,焦点能够转移到下一个元素,但想实现Shift+Tab,反向移动焦点时,却被DOM3的浏览 ...
- 各浏览器的Hack写法【转】
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
- 开源浏览器引擎Webkit引发浏览器格局变化
几乎一夜之间,原本采用IE核心的国产浏览器纷纷上马双核心,也让Webkit这个本不为大众熟知的技术术语走向前台.国产浏览器为何青睐Webkit?Webkit又会为竞争激烈的浏览器市场带来什么样的变化? ...
- Windows上使用CEF嵌入基于chrome内核浏览器小例
原文地址::https://blog.csdn.net/mfcing/article/details/43953433?utm_source=distribute.pc_relevant.none-t ...
最新文章
- 基于空间数据库MongoDB实现全国电影票预定系统
- 113. 路径总和 (剑指 Offer 34. 二叉树中和为某一值的路径)(回溯算法)
- android WPS如何绘制垂直和水平的直线
- 悲报, GIF 之父因新冠去世
- 《Non-invasive Fetal ECG Signal Quality Assessment for Multichannel Heart Rate Estimation》论文解读-废弃
- 40个很棒的由html5开发的网络游戏案例
- JavaScript(三)——对象与数组基础及API
- 异常处理:你不可能总是对的 - 零基础入门学习Python032
- dwr运行时出现Servlet.init() for servlet dwr-invoker threw exception的解决方法
- YOLO-V4解读:速度与精度的完美结合
- java 硬盘序列号_如何使用Java获取硬盘序列号?
- excel函数交叉定位查找内容+根据内容查找行列号(反向查找)
- 高等数学-考试常用的三角函数公式
- .NET 6 RC2 版本发布
- 【IoT】STM32 文件系统 fatfs 移植笔记详解
- Character与char的区别
- 使用HTML批量拼图
- 红帽Redhat—Linux文本处理
- aria2+ariang+nginx linux 离线下载部署
- java编译报错提示编码gbk的不可映射字符啥意思_解决java编译错误:编码GBK的不可映射字符...
热门文章
- LeetCode(897)——递增顺序查找树(JavaScript)
- react-native---配置reactnative报红,run-Android时候报错unable to load script from assets 'index.android.bundl
- python调用图灵api_python调用API实现智能回复机器人
- 借呗还款日都是一样吗?
- 想买一辆别克GL8用做家庭用车,跑长途自驾游可以吗?
- DLog-M有什么用
- 企业职工能实行弹性退休吗?
- 新房装修有哪些除味小妙招?
- 促销方式,各位自己马克,留着用就好
- 应届生找工作是首先选择一个公司,还是选择一个行业?