-
background-color:rgba(,,,); 红绿蓝相互叠加设置颜色0-255 a是透明度参数 0-1查看全部
-
border-radius 顺时针方向设置边角 px为单位查看全部
-
animation-function 主要就是来决定动画的播放方式。 ease 从初始状态到终止状态速度，由快到慢。 liner 从初始状态到终止状态，速度保持的是恒速。 ease-in 从初始状态到终止状态，速度越来越快，是渐显效果。 ease-out 从初始状态到终止状态，速度越来越慢，是渐隐效果。查看全部
-
transform-origin 改变元素的中心位置。查看全部
-
改变元素的形状查看全部
-
1.创建一个flex容器 任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部 如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }查看全部
-
径向渐变 radial-gradient() 背景图片尺寸 background-size: length|percentage|cover|contain;查看全部
-
CSS生成内容 通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来插入内容，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content：none/attr(标签属性值)/url(外部资源)/sting（字符串） a:after { content:attr(title); color:#f00; }查看全部
-
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 内阴影：inset 外阴影：无Inset 为一个盒子添加多个阴影：用逗号隔开查看全部
-
半心圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 实心圆：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。查看全部
-
浏览器前缀 -webkit：chrome和safari -moz：firefox -ms：IE -o：opera查看全部
-
实心上半圆： 方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆： 方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }查看全部
-
CSS3外轮廓属性 和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit outline-offse:定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 div { padding: 20px; margin: 30px; outline: red solid 2px; outline-offset:10px; border: 2px solid green; }查看全部
-
自由缩放属性resize resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。 resize: none | both | horizontal | vertical | inherit 不能拖动修改/同时修改宽度和高度/仅宽度/仅高度/继承父元素resize属性值查看全部
-
Responsive设计——不同设备的分辨率设置 @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }查看全部
举报
0/150
提交
取消