CSS/CSS3常用的样式兼容,样式总结
这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容'、‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘css的透明’等等
单行缩略号
.overhid{
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
css圆角兼容
.setradius{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
元素阴影
.boxShadow{
-moz-box-shadow: 5px,5px,1px,#;
-webkit-box-shadow:5px,5px,1px,#;
box-shadow: 5px,5px,1px,#;
}
参数:box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color], [inset x-offset y-offset blur-radius spread-radius color]
none:默认值,元素没有任何阴影效果。
inset:阴影类型,可选值。如果不设置,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是给元素设置内阴影。
x-offset:阴影水平偏移量,其值可以是正负值。如果取正值,则阴影在元素的右边,反之取负值,阴影在元素的左边。
y-offset:阴影垂直偏移量,其值可以是正负值。如果取正值,则阴影在元素的底部,反之取负值,阴影在元素的顶部。
blur-radius:阴影模糊半径,可选参数。其值只能是正值,如果取值为“0”时,表示阴影不具有模糊效果,如果取值越大,阴影的边缘就越模糊。
spread-radius:阴影扩展半径,可选参数。其值可以是正负值,如果取值为正值,则整个阴影都延展扩大,反之取值为负值,则整个阴影都缩小。
color:阴影颜色,可选参数,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在Webkit内核下的浏览器将无色,也就是透明,建议不要省略这个参数。
border取消宽度影响
.noborder{/*border 0width*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
css3的背景渐变
.background{
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
}
css的透明
.transparent{
filter:alpha(opacity=);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
取消div选中蓝色背景
.nousel{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
//说明:1.IE6-9不支持该属性但支持使用标签属性 onselectstart="return false;"2.直到Opera不支持该属性,支持使用私有的标签属性 unselectable="on";
css3设置字体
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
取消移动端元素被点击高亮显示
.nohighlight{
-webkit-tap-highlight-color: transparent;
}
取消移动端表单元素的默认风格
input,textarea{
-webkit-appearance: none;
}
办公资源网址导航 https://www.wode007.com
取消表单元素的轮廓样式
input{
outline:none;
}
textarea去掉右侧滚动条,去掉右下角拖拽
textarea{
overflow:hidden;
resize:none;
}
CSS/CSS3常用的样式兼容,样式总结的更多相关文章
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- CSS/CSS3常用的样式
强制文本显示 让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 单行显示语法:white-space:nowrap; div{ white-space:nowrap; ...
- Css:常用的去除默认样式
*{ padding: 0; margin: 0; } ul,ol{ list-style: none; } a,a:hover,a:link,a:visited,a:active{ ...
- css/css3常用收集/笔记
_______________________________________________________________ css3 瀑布流 N 列 <ul><li>aa ...
- CSS3常用属性浏览器兼容前缀
1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\ ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
随机推荐
- Python爬虫 爬取搜狗搜索到的内容页面
废话不多说,直接上代码 import requests def main(): url='https://www.sogou.com/web' headers={ 'User_Agent':'Mozi ...
- iOS-Core Foundation框架到Foundation桥接的三种方式
温故知新.勤总结,才能生巧!这次总结一下 :Core Foundation框架到Foundation桥接的三种方式 Foundation提供OC的基础类(像NSObject).基本数据类型等. Cor ...
- JNI_day01
C语言简介 system()是提供C语言调用系统命令的函数 C语言基本数据类型 C语言中的整数类型:char/short/int/long C中使用ASCII保存字符,所以char所占用的字节数为1 ...
- hiredis window 源码编译
编译工具 cmake mingw730_32 版本 hiredis:0.15 cmake: cmake-3.12.4-win64-x64 mingw: 7.3.0 make配置 注意:D:\Qt\Qt ...
- WPF 如何流畅地滚动ScrollViewer 简单实现下
看了看原生UWP的ScrollViewer,滑动很流畅(例如 开始菜单),但是WPF自带的ScrollViewer滚动十分生硬.. 突发奇想,今天来实现一个流畅滚动的ScrollViewer. 一.目 ...
- FTP 常用命令
1. 准备 1.1 ftp 信息: ftp 服务器地址:192.168.168.10 用户名:will 密码:123 1.2 ftp 工具 使用 Windows 命令行: “开始” 按钮-> 搜 ...
- 分享一个我自己做的 Excel 万年历
下载链接在此. 纯 Excel 公式实现,带农历,可自定义节日.配色. 带有紧凑日历和记事日历两种日历,均可直接 Ctrl+P 打印,且打印时不带有顶部的控制栏.
- Android学习笔记StateListDrawable文件
SateListDrawable,可包含一个 Drawable 数组,让目标组件在不同状态显示不同 Drawable.对应的 xml 文件的根节点 示例 edittext_focused.xml &l ...
- 重学 Java 设计模式:实战代理模式「模拟mybatis-spring中定义DAO接口,使用代理类方式操作数据库原理实现场景」
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 难以跨越的瓶颈期,把你拿捏滴死死的! 编程开发学习过程中遇到的瓶颈期,往往是由于看不 ...
- vulstack红队评估(二)
一.环境搭建: 1.根据作者公开的靶机信息整理: 靶场统一登录密码:1qaz@WSX 2.网络环境配置: ①Win2008双网卡模拟内外网: 外网:192.168.1.80,桥接模式与物理机相 ...