合肥营销网站建设,网页优化方法,网站建设需要域名吗?,常见的建站工具文章目录 CSS3概述CSS3私有前缀常见浏览器私有前缀 新增盒模型相关属性怪异盒模型拖拽调整盒子大小盒子阴影不透明度 新增背景属性background-originbackground-clipbackground-size多背景图backgorund 复合属性 新增边框属性边框圆角边框外轮廓 新增文本属性文本阴影文本换行文… 文章目录 CSS3概述CSS3私有前缀常见浏览器私有前缀 新增盒模型相关属性怪异盒模型拖拽调整盒子大小盒子阴影不透明度 新增背景属性background-originbackground-clipbackground-size多背景图backgorund 复合属性 新增边框属性边框圆角边框外轮廓 新增文本属性文本阴影文本换行文本溢出文本修饰文本描边 CSS3概述 CSS3 是 CSS2 的升级版本它在 CSS2 的基础上新增了很多强大的新功能从而解决一些实际面临的问题。CSS3 计划在未来会按照模块化的方式去发展查看官方文档CSS3 的新特性如下: 新增了更加实用的选择器例如动态伪类选择器、目标伪类选择器、伪元素选择器等等新增了更好的视觉效果例如圆角、阴影、渐变等新增了丰富的背景效果例如支持多个背景图片同时新增了若干个背景相关的属性新增了全新的布局方案 —— 弹性盒子新增了 Web 字体可以显示用户电脑上没有安装的字体增强了颜色例如 HSL 、 HSLA 、 RGBA 几种新的颜色模式新增 opacity 属性来控制透明度增加了 2D 和 3D 变换例如旋转、扭曲、缩放、位移等增加动画与过渡效果让效果的变换更具流线性、平滑性…… CSS3私有前缀
div {width: 400px;height: 400px;-webkit-border-radius: 20px;
}例如代码中的 -webkit- 就是私有前缀其作用是 W3C 标准所提出的某个 CSS 特性在被浏览器正式支持之前浏览器厂商会根据浏览器的内核使用私有前缀来测试该 CSS 特性在浏览器正式支持该 CSS特性后就不需要私有前缀了简而言之就是为了支持CSS的新特性所进行的兼容性处理 查询 CSS3 兼容性的网站点击查询CSS属性兼容性
常见浏览器私有前缀
Chrome 浏览器 -webkitSafari 浏览器 -webkitFirefox 浏览器 -mozEdge 浏览器 -webkit旧 Opera 浏览器 -o旧 IE 浏览器 -ms
说明 新增盒模型相关属性
怪异盒模型 使用 box-sizing 属性可以设置盒模型的两种类型 可选属性值描述content-boxwidth 和 height 设置的是盒子内容区的大小默认值border-boxwidth 和 height 设置的是盒子整个区域的总大小 拖拽调整盒子大小 使用 resize 属性可以控制是否允许用户拖拽调节元素尺寸需搭配overflow属性开启 可选属性值描述none 不允许用户调整元素大小。 (默认)both用户可以调节元素的宽度和高度horizontal只允许用户可以调节元素的水平宽度vertical只允许用户可以调节元素的垂直高度 盒子阴影 使用 box-shadow 属性为盒子添加阴影 语法
box-shadow: h-shadow v-shadow blur spread color inset;取值含义
可选属性值描述h-shadow水平阴影的位置必须填写可以为负值v-shadow垂直阴影的位置必须填写可以为负值blur 可选模糊距离spread 可选阴影的外延值color可选阴影的颜色默认黑色inset可选将外部阴影改为内部阴影
默认值 box-shadow:none 表示没有阴影
/* 写两个值含义水平位置、垂直位置 */
box-shadow: 10px 10px;/* 写三个值含义水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;/* 写三个值含义水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;/* 写四个值含义水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;/* 写五个值含义水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;/* 写六个值含义水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;不透明度 opacity 属性能为整个元素添加透明效果 值是 0 到 1 之间的小数 0 是完全透明 1 表示完全不透明 新增背景属性
background-origin 作用设置背景图的定位原点 语法
padding-box 从 padding 区域开始显示背景图像。—— 默认值border-box 从 border 区域开始显示背景图像content-box 从 content 区域开始显示背景图像
background-clip 作用设置背景图的向外裁剪的区域 语法
border-box 从 border 区域开始向外裁剪背景。 —— 默认值padding-box 从 padding 区域开始向外裁剪背景content-box 从 content 区域开始向外裁剪背景text 背景图只呈现在文字上 background-size 作用设置背景图的尺寸 语法
用长度值指定背景图片大小不允许负值
background-size: 300px 200px;用百分比指定背景图片大小不允许负值
background-size: 100% 100%;auto 背景图片的真实大小。 —— 默认值 contain 将背景图片等比缩放使背景图片的宽或高与容器的宽或高相等再将完整背景图片包含在容器内但要注意可能会造成容器里部分区域没有背景图片。
background-size: contain;cover 将背景图片等比例缩放直到完全覆盖容器图片会尽可能全的显示在元素上但要注意背景图片有可能显示不完整。—— 相对比较好的选择
background-size: cover;多背景图
CSS3 允许元素设置多个背景图片
/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,url(../images/bg-rt.png) no-repeat right top,url(../images/bg-lb.png) no-repeat left bottom,url(../images/bg-rb.png) no-repeat right bottom;backgorund 复合属性
background: color url repeat position / size origin clip新增边框属性
边框圆角 在 CSS3 中使用 border-radius 属性可以将盒子变为圆角 同时设置四个角的圆角
border-radius:10px;分开设置每个角的圆角
属性名描述border-top-left-radius设置左上角圆角半径1. 一个值是正圆半径2. 两个值分别是椭圆的 x 半径、 y 半径border-top-right-radius设置右上角圆角半径1. 一个值是正圆半径2. 两个值分别是椭圆的 x 半径、 y 半径border-bottom-right-radius设置右下角圆角半径1. 一个值是正圆半径2. 两个值分别是椭圆的 x 半径、 y 半径border-bottom-left-radius设置左下角圆角半径1. 一个值是正圆半径2. 两个值分别是椭圆的 x 半径、 y 半径
综合写法
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y边框外轮廓
outline-width 外轮廓的宽度outline-color 外轮廓的颜色outline-style 外轮廓的风格 none 无轮廓dotted 点状轮廓dashed 虚线轮廓solid 实线轮廓double 双线轮廓 outline-offset 设置外轮廓与边框的距离正负值都可以设置 outline 复合属性
outline:50px solid blue;新增文本属性
文本阴影 在 CSS3 中我们可以使用 text-shadow 属性给文本添加阴影 语法
text-shadow: h-shadow v-shadow blur color;属性值描述h-shadow必需写水平阴影的位置。允许负值v-shadow必需写垂直阴影的位置。允许负值blur可选模糊的距离color可选阴影的颜色,默认黑色
文本换行 在 CSS3 中我们可以使用 white-space 属性设置文本换行方式 常用值如下
属性值描述normal文本超出边界自动换行文本中的换行被浏览器识别为一个空格。默认值pre按代码原样输出与 pre 标签的效果相同pre-wrap在 pre 效果的基础上超出元素边界自动换行pre-line在 pre 效果的基础上超出元素边界自动换行且只识别文本中的换行空格会忽略nowrap 强制不换行
文本溢出 在 CSS3 中我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式 常用值如下
属性值描述clip当内联内容溢出时将溢出部分裁切掉。 默认值ellipsis 当内联内容溢出块容器时将溢出部分替换为 ... 文本修饰 CSS3 升级了 text-decoration 属性让其变成了复合属性 text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor子属性取值及其含义 text-decoration-line设置文本装饰线的位置 none 指定文字无装饰 默认值underline 指定文字的装饰是下划线overline 指定文字的装饰是上划线line-through 指定文字的装饰是贯穿线 text-decoration-style 文本装饰线条的形状 solid 实线 默认double 双实线dotted 点状线条dashed 虚线wavy 波浪线 text-decoration-color 文本装饰线条的颜色
文本描边 注意文字描边功能仅 webkit 内核浏览器支持 -webkit-text-stroke-width 设置文字描边的宽度写长度值-webkit-text-stroke-color 设置文字描边的颜色写颜色值-webkit-text-stroke 复合属性设置文字描边宽度和颜色 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
