CSS3

CSS查询网站
caniuse.com
构建工具
webpack

新增长度单位
vw 相当于视口宽度的百分比
vh 相当于视口高度的百分比
vmax 视口宽高较大值的百分比
rem根元素字体大小的倍数。

新增盒子
属性
box-sizing:content-box;//内容盒子
box-sizing:border-box;//宽高就是盒子的总宽高。

.box1{
  width:200px;
  height:200px;
  padding:5px;
  border:5px solid black;
}

上述css盒子如果是内容盒子盒子是220220 如果是border-box是200200 内容是180*180

resize

resize:horizontal;
overflow:hidden;

水平方向可以调整盒子大小。
resize:vertical;垂直方向可调整大小
resize:both;垂直水平都可以调整大小
resize:none;不可以调整大小

box-shadow盒子阴影
两个值:水平,垂直
box-shadow:10px 10px;
三个值:水平,垂直,颜色;
box-shadow:10px 10px blue;
三个值:水平,垂直,模糊程度;
box-shadow:10px 10px 10px;
四个值:水平,垂直,模糊程度 颜色
box-shadow:10px 10px 10px blue;
五个值:水平,垂直,模糊程度,外沿 颜色
box-shadow:10px 10px 10px 10px blue;
六个值:水平,垂直,模糊程度,外沿 颜色 内阴影
box-shadow:10px 10px 10px 10px blue inset;

opacity 给整个元素增加透明度。

新增背景属性
background-orgin 设置背景图时的起点位置
padding-box
border-box
content-box 默认padding-box
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin

background-clip
超出范围的图片不显示
border-box
背景延伸至边框外沿(但是在边框下层)。

padding-box
背景延伸至内边距(padding)外沿。不会绘制到边框处。

content-box
背景被裁剪至内容区(content box)外沿。

text 实验性
背景被裁剪成文字的前景色。

background-size
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size#cover

background复合属性
background:背景颜色 背景url 是否重复 位置/大小 原点 裁剪方式

多背景图
background:url("1") no-repeat left top,
url("2") no-repeat right top,
url("3") no-repeat left bottom,
url("4") no-repeat right bottom;

新增边框属性:
1.边框圆角:border-radius:2px;
单独设置,左上-》右上-》右下-》左下

2.outline外边框

新增文本属性
1.文本阴影text-shadow:10px 10px;


可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色,则使用用户代理自行选择的颜色,因此需要跨浏览器的一致性时,应该明确定义它。


必选。这些 值指定阴影相对文字的偏移量。 指定水平偏移量,若是负值则阴影位于文字左侧。 指定垂直偏移量,若是负值则阴影位于文字上方。如果两者均为 0,则阴影位于文字正后方,如果设置了 则会产生模糊效果。

可选。这是 值。如果没有指定,则默认为 0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。

2.文本换行white-space
这个属性指定了两件事:

空白字符是否合并,以及如何合并。
是否换行,以及如何换行。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

3.文本溢出
text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号(“…”)或显示一个自定义字符串
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow
注意:块容器必须显式定义overflow的值为非visible
且white-space:nowrap

4.text-decoration
该属性是以下 CSS 属性的简写:

text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

5.文本描边
CSS 属性 -webkit-text-stroke 指定了文本字符的笔触宽度和笔触颜色。此属性为全称属性 -webkit-text-stroke-width 和 -webkit-text-stroke-color 的简写属性。

新增渐变
1.线性渐变
background: linear-gradient(#e66465, #9198e5);

/* 渐变轴为 45 度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 色标:从下到上,从蓝色开始渐变,到高度 40% 位置是绿色渐变开始,最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 颜色提示:从左到右的渐变,由红色开始,沿着渐变长度到 10% 的位置,然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);

/* 多位置色标:45% 倾斜的渐变,左下半部分为红色,右下半部分为蓝色,中间有一条硬线,在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

2.径向渐变
radial-gradient() CSS 函数创建一个图像,该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成,其形状可以是圆形或椭圆形。函数的结果是 数据类型的对象,此对象是一种特殊的 类型。

3.重复渐变
CSS 函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的 ,类似于 linear-gradient,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是 数据类型的对象,此对象是一种特殊的 类型。

web字体。

@font-face{
//定义
  font-family:"哈哈";
  src:url("./font1/方正.ttf");
}
//使用
body{
    font-family:"哈哈";
}

https://www.iconfont.cn/login

1.渐变

.box1{
    width:200px;
    height:200px;
    background-color:orange;
    transition-property:height;//设置哪个属性需要过渡效果
    transition-duration:5s;//过渡时间
     transition-delay:2s;//延迟2s开始过渡
}

.box1:hover{
    height=400px;
}
<body>
  <div class="box1></div>
</body>

不平滑过度

.box1{
  transition-timing-function:ease;//慢,快,慢
}

.box2{
  transtion-timing-function:linear;//匀速
}


/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;//慢 快
transition-timing-function: ease-out;//快-慢
transition-timing-function: ease-in-out;//慢 快 慢
transition-timing-function: linear;
transition-timing-function: step-start;//不考虑时间直接抵达终点
transition-timing-function: step-end;//等过渡时间结束时直接抵达终点,无过渡效果
transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);//贝塞尔曲线

列式布局

column-count:3;//列数为3
column-width:200px;//每列200px宽,自动计算列数
column-gap:20px;//列与列的空隙。
column-rule-width:2px;//调整边框样式,宽度颜色
column-rule-style:dashed;
column-rule-color:red;
column-span:all;//横跨列数
posted @ 2024-12-20 13:59  zhongta  阅读(13)  评论(0)    收藏  举报