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 属性的更多相关文章

  1. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  2. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  4. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  5. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  6. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  7. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  8. 【原】常见CSS3属性对ios&android&winphone的支持

    2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...

  9. CSS3属性border-radius绘制多种多样的图形

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

  10. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

随机推荐

  1. 数字化IT人才与组织

    企业的数字化目标 数字时代需要怎样的IT 数字化平台战略 产品一体化交付能力 产品设计与规划的能力 路线图 数字人才框架 Tips: 赋能授权(Empowerment)是近年来应最多的商业语汇之一.赋 ...

  2. error while loading shared libraries: libg2o_core.so: cannot open shared object file: No such file or directory解决方法

    在build文件夹目录环境下输入: sudo ldconfig 然后编译就可以了.因为g2o刚装,没生效.

  3. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  4. ES6走一波 数组的扩展

    Array flat 数组实例的扁平化方法(浏览器支持不佳) 建议使用 lodash的 flatten

  5. win10下maven的安装与配置

    下载apache-maven-3.5.3-bin.zip并解压: 环境配置: 系统环境:添加=>MAVEN_HOME 值为apache-maven-3.5.3的路径(D:\xxx\apache- ...

  6. 3D Slicer中文教程(一)—下载及安装方法

    3D Slicer是用于医学图像信息学,图像处理和三维可视化的开源软件平台. 通过国家卫生研究院和全球开发人员社区的支持,二十多年来,Slicer为医生,研究人员和公众提供了免费,强大的跨平台加工工具 ...

  7. AUTOCAD参数约束功能

    概要:http://through-the-interface.typepad.com/through_the_interface/2011/08/a-simplified-net-api-for-a ...

  8. LNMP 下使用命令导出导入 MySQL 数据库

    导出数据库 导出数据库为 db_wp.sql.gz 文件: 1 mysqldump -u数据库用户名 -p数据库密码 --add-drop-table --complete-insert 数据库名 | ...

  9. C#常用的单元测试框架

    C#常用的单元测试框架有XUnit .NUnit .MSTest 做过单元测试的同学大概都知道以上几种测试框架,这几种框架除了标注测试类和方法的特性用的不一样之外,XUnit 和 NUnit 是非常相 ...

  10. POJ1321 棋盘问题(简单搜索)

    题意: 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放 ...