CSS3笔记(菜鸟教程）

admin管理员组

文章数量:1794759

CSS3笔记(菜鸟教程）

1.CSS3边框: (1).border-radius:创建圆角边框 (2).box-shadow:添加阴影 (3).border-image:用图片作为边框 2.CSS3圆角:: (1).这只是一个圆角边框如果定义background属性那么会有背景颜色 (2).这里是用图片来做背景颜色的代码 (3).边框的每个圆角 四个值:左上 右上 右下 左下 三个值:左上 右上和左下 右下 两个值:左上和右下 右上和左下 一个值:四个角相同 border-top-left-radious border-top-right-radious border-bottom-left-radious border-bottom-right-radious 3.CSS3渐变 CSS3线性渐变(Linear Gradients) （1).从上到下渐变 （2).从左到右渐变 （3).从左上角到右下角的渐变 （4).使用角度的渐变 0deg定义从左到右的渐变 90deg定义了从下到上的渐变 （5).多个颜色节点的渐变 （6).使用透明度的渐变 rgba最后一个参数是0-1的值，0表示完全透明1表示完全不透明 （7).重复性的线性渐变 CSS3径向渐变(radial-gradient) （1). shape size at posion: closest-side at % % farthest-side at % % closest-corner at % % farthest-corner at % % shpe:elipse(默认椭圆)circle(圆形）等等 4.CSS3文本效果 text-shadow:文本阴影 box-shadow:盒子阴影 text-overflow:如何处理溢出内容 clip：溢出的内容… ellipsis:直接忽略溢出的部分 word-wrap:长文本换行 break-word word-break:单词拆分 keep-all:保留单词的完整性 break-all:不暴力单词的完整性 一行满了就直接换行 5.CSS3 2D转换 （1).translate(x,y):沿着x y轴移动元素 translate(x):沿着x轴移动元素 translate(y):沿着y轴移动元素 （2).rotate(angle):旋转一定的角度 （3).scale(x,y):缩放旋转改变宽度和高度 （4).skew(x,y):沿着x,y轴倾斜转换 （5)matrix(******):六个参数包括旋转缩放平移倾斜 6.CSS3过渡 7CSS5动画 8.CSS3多列 （1).column-count:文本分为几列 （2).column-gap:定义列与列之间的间隙 （3).column-rule-style:指定了列与列间的边框样式 （4).column-rule-width:指定了两列边框厚度 （5).column-rule-color:指定两列边框颜色 （6).column-rule:所有属性的编写 （7).column-span:定义了元素跨越多少列 （8).column-width:定义了每列的宽度 9.CSS3用户界面 （1).resize:指定元素是否由用户调整大小 none:无法调整大小 both:可以调整大小 horizontal:可调整元素的宽度 vertical:可调整元素的高度 （2).box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。 （3).outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 10.CSS3边框 CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中: 11.CSS3弹性盒子 12.CSS3多媒体查询

本文标签： 菜鸟笔记教程