CSS3笔记(菜鸟教程）

编程知识更新时间:2023-04-05 15:02:25

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(边框)。