宅羽的博客

◆ 过渡：过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加过渡动画。虽然低版本浏览器不支持（ie9以下版本），但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。◆ 过渡动画：从一个状态渐渐的过渡到另外一个状态。◆ 语法格式:transition...

◆ 属性选择器：通过标签属性来进行选择Element[attr]：表示存在attr属性即可--div 带有class属性div[class]Element[attr=val]：表示属性值完全等于val--div 带有class属性 ，并且值为demodiv[class="demo"]Element[attr*=val]：表示属性值里包含val字符并且在“任意”位置...

◆ transparent：opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；transparent 不可调节透明度，始终完全透明.out{ width: 400px; height: 400px; margin:100px auto; border: 1px solid #000; background: transparen...

◆ text-shadow：可以分别设置偏移量、模糊度、颜色（可设透明度）水平偏移量：正值向右，负值向左垂直偏移量：正值向下，负值向上模糊度是不能为负值text-shadow: 5px 5px 2px #ccc;多个阴影效果，并列书写，是有逗号隔开text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;◆ 凹凸字体案例：&lt...

◆ box-sizing：CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。content-box:外加模式，对象的实际宽度等于设置的width值和border、padding之和。默认值为content-box。border-box：内减模式，对象的实际宽度就等于设置的width...

◆ 浏览器私有化前缀：-webkit-: 谷歌 苹果background:-webkit-linear-gradient(left,red,blue);-moz-:火狐background:-moz-linear-gradient(left,red,blue);-ms-：iebackground:-ms-linear-gradient(left,red,blue);...

◆ 边框圆角：属性：border-radius圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如图所示，我们将四个角标记成1、2、3、4，，CSS里提供了border-radius来分别设置这些角横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则。“/”前面的1-4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1-4个参数用来设置纵...

◆ 背景尺寸：通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。其参数设置如下：可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）background-size:100px 100px;设置为cover时，自动调整缩放比例，图片完全覆盖盒子，如有溢出部分则会被隐藏。background-...