css3 属性
1.css 面试题:
css 组成:
css 样式组成
规则:选择器+声明块 声明块:css属性+css属性值
2.css 解析规则:
从右往左
3.文字超出省略号显示:
1.元素不是内联块
2.overflow:hidden
3.text-overflow:ellipsis;
4.表单伪类
disabled enabled checked(自定义单选) focus
5.结构伪类
:nth-child(index) 找到某类index个子元素
:nth-of-type(index) 找到index个子元素 以元素为中心
6.高斯模糊:
<div class="bg">
<img src="/static/demo.jpg" class="test-img">
</div
/* 外层椭圆形状,内层图片只能在椭圆区域展示 */
.bg{
position: relative;
left: -10%;
width: 120%;
height: 130px;
border-radius: 0 0 80% 80%;
overflow: hidden;
}
/* 内层显示的图片 */
.bg img{
width: 100%;
height: 100%;
filter: blur(20px);
overflow: hidden; }
7.文字阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
8.框阴影
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
css3 属性的更多相关文章
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 移动端 几个css3属性的练习
转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
随机推荐
- Mysql MGR架构误操作引发的问题处理
[背景介绍] 故障方描述:一次用户刷权限的时候不小心把数据库用户表记录删掉了,执行之后发现不对后重建用户,杀掉进程后重新MGR启动报错. [报错信息] 2018-06-13T12:47:41.4055 ...
- [再寄小读者之数学篇](2014-06-22 积分不等式 [中国科学技术大学2012年高等数学B考研试题])
函数 $f(x)$ 在 $[0,1]$ 上单调减, 证明: 对于任何 $\al\in (0,1)$, $$\bex \int_0^\al f(x)\rd x\geq \al \int_0^1 f(x) ...
- Hive_1
Sqoop实现Hbase和关系型数据库的数据互导 Zookeeper 配置的更新,文件的命名 Hive是建立在Hadoop之上为了减少MapReduce jobs编写工作的批处理系统,HBase是为了 ...
- 【洛谷P1303A*Bprublem】
题目描述 求两数的积. 输入输出格式 输入格式: 两行,两个数. 输出格式: 积 输入输出样例 输入样例#1: 1 2 输出样例#1: 2 说明 每个数字不超过10^2000,需用高精 这道题还是比较 ...
- 老师博客copy -高阶函数2
新闻 管理 Py西游攻关之函数 一 函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在B ...
- 如何查询oracle数据库中的各种角色
1. 查询oracle中所有用户信息select * from dba_users;2. 只查询用户和密码select username,password from dba_users;3. 查询当前 ...
- Linux安装配置git
1.查看git安装版本 git version 2.查看git安装位置 whereis git 3.yum安装git yum install git 4.生成ssh key cd /root/.ssh ...
- PADS Logic VX.2.3 修改软件界面语言
操作系统:Windows 10 x64 工具1:PADS Logic VX.2.3 2019.03.19 星期二 晴 记录一件伤心的事,因为公司要求统一原理图设计.PCB Layout工具,所以,以后 ...
- python 2.7 数据结构: 基础面试总结
python中基础的数据类型包括: 1 Number(数字) 2 String(字符串) 3 List(列表) 4 Tuple(元组) 5 set(集合) 6 Pictionary(字典) 按照可变数 ...
- Visual Studio 2017
美国西雅图时间 3 月 7 日上午 9 点(北京时间 8 日凌晨 1 点),微软将正式发布 Visual Studio 2017. 下载地址:https://www.visualstudio.co ...