CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. 文字阴影: text-shadow:x,y,z,color; -x偏移量,x轴为文字左边 -y偏移量,y轴为文字顶部 -z:阴影模糊半径 -color:阴影颜色 理解x和y的含义,颜色可以叠加的,里面有代码!!!! 注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要…
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产生效果. 反复测试后发现浏览器自动填充机制是满足:页面里有一个type=password的input且这个input前面有一个type=text的input.的时候就会进行自动填充. firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到…
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o…
CSS3是CSS(层叠样式表)技术的升级版本,增加了很多新属性,我们在web开发中采用css3技术可以提高程序的性能以及用户体验.而且一般面试中会问到知道哪些新增加的属性,我们不可能将所有东西一一复述给面试官,需要自己有一个清晰的思路,可以选择自己使用过的一些新属性来阐述. 在W3school上css3被划分为模块,其中最重要的CSS3模块包括: 选择器 框模型 背景及边框.文本效果 2D/3D转换 动画 多列布局 用户界面 下面按着自己比较了解的往下写. 一.边框特性 CSS3对网页中的边框进…
1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符,匹配字符串尾部*/ a[href$='.png'] /* *运算符 匹配任意位置的子字符串*/ a[href*='google'] 2. box-sizing属性 可使用box-sizing属性选择盒子模型:border-box; content-box(默认); padding-box CSS3…
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚.就google了一篇,发现不错,翻译下来吧. 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, C…
1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,italic或者normal; font-variant 以小型大写字体或者正常字体显示文本 font-weight 设置字体的粗细,normal/bold/bolder/lighter 实例:在一个声明上设置所有的字体属性: font:italic bold 12px;//设置字体大小 font-size…
作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <style>           div{width:100px;height:100px;background:red;animation:my 5s;}          @keyframes my         {              0%{background:red;width:100px;}…
scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑轮滚动或者手机触屏滚动,不受这个属性的影响.在根元素中指定这个属性时,它反而适用于视窗. scroll-behavior属性包括: smooth | auto; auto: 默认值,表示滚动框立即滚动到指定位置. smooth 表示允许滚动时采用平滑过渡,而不知直接滚动到相应位置,最常见的比如回到顶…
1.text-shadow  文字阴影 p{ text-shadow:2px 2px 10px #000; } 四个参数,依次: a:水平偏移 b:垂直偏移 c:阴影程度 d:阴影颜色 2.word-break:break-all 解释:允许单词换行,是紧接前面内容 3.word-wrap:break-word 解释:允许单词换行,是先把单词换一行 4.white-space:nowrap 解释:强制文本不换行 5.text-overflow:ellipsis 解释:显示省略符号来代表被修剪的文…