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% ...
随机推荐
- js 计算当年还剩多少时间的倒数计时 javascript 原理解析【复制到编辑器查看推荐】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 大家都知道fastclick能解决300ms延迟,现在我们来看一下,使用方法
1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中,找到mian.js这个入口文件,打开 3.在其中加入: import FastClic ...
- iPhone8再MacOS上修改手机铃声
1 选择下载好的mp3铃声文件,导入到itunes 2 将音乐改成AAA模式, 设置你的铃声时长 3 show in finder 找到文件,将mpr后缀修改成m4r,并删除掉mp3文件,将m4r文件 ...
- BZOJ 5093: [Lydsy1711月赛]图的价值
第二类斯特林数模版题 需要一些组合数的小$ trick$ upd:这里更新了本题巧妙的$ O(k)$做法,虽然常数很大就是了 传送门:here 题意:求所有$ n$个节点的无重边自环图的价值和,定义一 ...
- TCP-IP详解学习笔记2
TCP-IP详解学习笔记2 链路层 链路层的目的是为IP模块发送和接收IP数据报: TCP/IP支持多种不同的链路层,依赖于使用网络硬件类型:有线局域网(以太网,城域网(MAN),有线语音网络).无线 ...
- Mysql --数据库概述1
什么是数据(Data)? 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 在计算机中描述一个事物, ...
- 【原创】大叔经验分享(1)在yarn上查看hive完整执行sql
hive执行sql提交到yarn上的任务名字是被处理过的,通常只能显示sql的前边一段和最后几个字符,这样就会带来一些问题: 1)相近时间提交了几个相近的sql,相互之间无法区分: 2)一个任务有问题 ...
- R leaflet
setRepositories()#1 chooseCRANmirror()#2 ibrary(leaflet)#学习地址:http://rstudio.github.io/leaflet/marke ...
- 关于 layer.mask = label.layer 出现空白情况
源代码如下: self.numLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, ...
- Resharper 详细教程
前言 注:本文部分内容转载自:http://www.cnblogs.com/luminji/p/3285505.html 原文中部分快捷键在8.2版本中不适用,我已改正,并用红色标注出来 在线API: ...