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;
新增边框属性
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json