css3

css3私有前缀

私有前缀是为了让浏览器在 CSS3 规范还没有完全定稿时,能够试验性地实现新的 CSS 属性而引入,例如-webkit-border-radius

常见私有前缀

  • -webkit-:主要用于 Google Chrome 和 Safari 浏览器
  • -moz -:用于 Mozilla Firefox 浏览器
  • -ms -:用于 Microsoft Internet Explorer 浏览器

https://caniuse.com,浏览器属性兼容查询网站

新增长度单位-vw、vh、vmax、vmin
css 复制代码
/* vw(viewport width)是一个相对长度单位 */
/* vw是基于视口(viewport)的宽度来计算的。1vw等于视口宽度的 1%。例如,如果视口的宽度是 1000px,那么 1vw就是 10px(1000px * 1% = 10px) */
.box-test {
    width: 50vw;
    height: 50vw;
    border: 1px solid #DD302D;
}


/* vh(viewport height)是基于视口(viewport)的高度进行计算的。1vh等于视口高度的 1%。例如,如果视口的高度是 600px,那么 1vh就是 6px(600px×1% = 6px) */
.box-test {
    width: 50vh;
    height: 50vh;
    border: 1px solid #DD302D;
}
/*  vmax是取视口宽度和视口高度两者中的最大值作为基准来计算的。1vmax等于视口宽度和视口高度最大值的 1% */
/*  相反vmin是取视口宽度和视口高度两者中的最小值作为基准来计算的。1vmin等于视口宽度和视口高度最小值的 1% */
.box-test {
    width: 50vmax;
    height: 50vmin;
    border: 1px solid #DD302D;
}
新增盒子属性
box-sizing

box-sizing 用于改变默认的 CSS 盒模型中元素的宽高计算方式

css 复制代码
/* content-box,标准盒模型,默认值,元素的宽度和高度只计算content,不包括padding、border和margin,盒子的可能会被撑出指定宽高  */
/* border-box,怪异盒模型, 元素的宽度和高度包括padding、border和margin,盒子不会撑出指定宽阔,  */
.box-test {
    width: 20px;
    height: 20px;
    background-color: deepskyblue;
    box-sizing: border-box;
}
resize

可以控制是否允许用户调节元素尺寸,需要配合overflow使用

css 复制代码
/* none,默认值,不允许调整 */
/* horizontal 可以调节元素高度 */
/* vertical 用户可以调节元素的高度 */
/* both  可以调节元素的宽度和高度 */

.box-test {
    width: 20px;
    height: 20px;
    background-color: deepskyblue;
    resize: horizontal;
    overflow: auto;
}
box-shadow

用于给元素添加阴影效果

css 复制代码
/*  两个值- 水平位置、垂直位置,可以是负值,必填 */
    box-shadow: 10px 10px;
    /*  三个值- 水平位置、垂直位置 颜色(默认黑色) */
    box-shadow: 10px 10px blue;

    /*  三个值- 水平位置、垂直位置 模糊程度 */
    box-shadow: 10px 10px 20px;

    /* 四个值- 水平位置、垂直位置、模糊程度、颜色*/
    box-shadow: 10px 10px 20px deeppink;

    /* 五个值- 水平位置、垂直位置、模糊程度、阴影外延值、颜色*/
    box-shadow: 10px 10px 20px 20px deeppink;
    /* 六个值- 水平位置、垂直位置、模糊程度、阴影外延值、颜色、内阴影*/
    box-shadow: 10px 10px 20px 20px deeppink inset;
opacity

用于设置元素的不透明度

css 复制代码
/* 0为 完全透明,1为完全不透明,可以使用中间的小数*/
/* rgba 主要用于设置颜色的透明度,只影响颜色相关的属性 */
/* 使用opacity元素内部的所有内容,包括文本、图像、子元素等,都会统一受到该不透明度的影响 */
.box-test {
    width: 200px;
    height: 200px;
    background-color: deepskyblue;
    opacity: 0;
}
新增背景属性
background-origin

设置背景图的原点

css 复制代码
/* 从padding区域开始显示背景图像-默认值*/
    background-origin: padding-box;
    /* 从content区域开始显示背景图像 */
    background-origin: content-box;
    /* 从border区域开始显示背景图像 */

    background-origin: border-box;
background-clip

用于规定背景的绘制区域

css 复制代码
/* 默认值,边框以外的背景图、颜色不呈现  */
    background-clip: border-box;
    /* padding以外的背景图、颜色不呈现 */
    background-clip: padding-box;
    /* content以外的背景图、颜色不呈现 */
    background-clip: content-box;
    /* 背景只呈现在有文字上,其余部分不显示,需要与透明文字配合使用 */
    color: transparent;
    -webkit-background-clip: text;
background-size

用于控制背景图像的尺寸大小

css 复制代码
/* 默认值-背景图的真实大小 */
    background-size: auto;

    /* 使用像素设置背景图的宽高 */
    background-size: 200px 200px;
    /* 使用百分比设置背景图的宽高 */
    background-size: 100% 100%;
    /* 将背景图等比例缩放、使背景图片的宽或高与容易的宽或高相等,将完整背景图片包含在容器内,可能会造成容器里部分区域没背景图   */
    background-size: contain;
    /* 将背景图等比例缩放、尽可能的完整的呈现背景图 ,背景图片有可能显示不完整  */
    background-size: cover;
background-复合属性
css 复制代码
/* 背景颜色、背景url、是否重复、位置 / 大小 原点 裁剪方式*/
    background: skyblue url("favicon.ico") no-repeat  10px 10px / 500px 500px border-box content-box;
多背景图

一个元素内可以设置多个背景图,并设置属性、指定位置

css 复制代码
background: url("images/serch_icon.png") no-repeat left top,
                url("images/serch_icon.png") no-repeat right top,
                url("images/serch_icon.png") no-repeat left bottom,
                url("images/serch_icon.png") no-repeat right bottom;
新增边框属性
相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端